## 事件（监听机制）
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。 如：单击，双击，键盘按下，鼠标移动
* 事件源：组件。 如：按钮，文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
* 常见的事件
1、点击事件：onclick：单击事件；ondblclick：双击事件
2、焦点事件：onblur：失去焦点；onfocus：获得焦点
3、加载事件：onload：一张页面或一幅图像完成加载
4、鼠标事件：
onmousedown：鼠标按钮被按下
* 定义方法时，定义一个形参，接收event对象
* event对象的button属性可以获取鼠标按钮键被点击了。
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素上
onmouseup：鼠标按键被松开
5、键盘事件：
onkeydown：某个按键被按下了
onkeyup：某个按键被松开了
onkeypress：某个按键被按下并松开了
6、选中和改变：onchange：域的内容被改变；onselect：文本被选中
7、表单事件：
onsubmit：确认按钮被点击；(可以阻止表单提交，当方法返回false则表单被阻止提交)
onreset：充值按钮被点击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //2、加载完成事件 window.onload = function () { //1、失去焦点事件 /*document.getElementById("username").onblur = function () { alert("失去焦点了!"); }*/ //3、绑定鼠标事件(鼠标移动到元素智商) /* document.getElementById("username").onmouseover = function () { alert("鼠标来了"); }*/ //3、绑定鼠标事件(鼠标点击事件) /* document.getElementById("username").onmousedown = function (event) { alert(event.button); }*/ //键盘事件 /* document.getElementById("username").onkeydown = function (event) { if (event.keyCode == 13){ alert("表单被提交了"); }*/ //onchange事件 /* document.getElementById("cities").onchange = function () { alert("内容改变了"); }*/ /*document.getElementById("form").onsubmit = function () { //校验用户格式是否正确 var flag = true; return flag; }*/ } function checkForm() { return false; } </script> </head> <body> <!--function fun(){ return checkForm(); }--> <form action="#" id="form" onclick="return checkForm();"> <input id="username" name="username"> <select id="cities"> <option>--请选择--</option> <option>--北京--</option> <option>--上海--</option> <option>--广州--</option> <option>--杭州--</option> </select> <input type="submit" value="提交"> </form> </body> </html>
案例1：表格全选，反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table { width: 500px; border: 1px solid; margin-left: 30%; } div { margin-left: 30%; margin-top: 10px; } th, td { border: 1px solid; text-align: center; } .out{ background-color: white; } .over{ background-color: pink; } </style> <script> window.onload = function () { //全选方法2 //document.getElementsByName()获取class属性，然后遍历 //全选 var sall = document.getElementById("selectAll"); var th0 = document.getElementsByTagName("input"); sall.onclick = function () { th0[0].checked = true; th0[1].checked = true; th0[2].checked = true; th0[3].checked = true; } th0[0].onclick = function () { th0[1].checked = !th0[1].checked; th0[2].checked = !th0[2].checked; th0[3].checked = !th0[3].checked; } //全不选 var usall = document.getElementById("unSelectAll"); usall.onclick = function () { th0[0].checked = false; th0[1].checked = false; th0[2].checked = false; th0[3].checked = false; } //反选 var sr = document.getElementById("selectRev"); sr.onclick = function () { th0[0].checked = !th0[0].checked; th0[1].checked = !th0[1].checked; th0[2].checked = !th0[2].checked; th0[3].checked = !th0[3].checked; } //鼠标移上去变色移走还原 var trs = document.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++){ trs[i].onmousemove = function () { this.className = "over"; } trs[i].onmouseout = function () { this.className = "out"; } } } </script> </head> <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <div> <input type="button" id="selectAll" value="全选"> <input type="button" id="unSelectAll" value="全不选"> <input type="button" id="selectRev" value="反选"> </div> </body> </html>
案例2：表单校验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left { /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child { color: #FFD026; font-size: 20px; } .rg_left > p:last-child { color: #A6A6A6; font-size: 20px; } .rg_center { float: left; /* border: 1px solid red;*/ } .rg_right { /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child { font-size: 15px; } .rg_right p a { color: pink; } .td_left { width: 100px; text-align: right; height: 45px; } .td_right { padding-left: 50px; } #username, #password, #email, #name, #tel, #birthday, #checkcode { width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode { width: 110px; } #img_check { height: 32px; vertical-align: middle; } #btn_sub { width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } #td_sub { padding-left: 150px; } .error { color: red; vertical-align: middle; } </style> <script> window.onload = function () { //1、给表单绑定onsubmit事件 监听 document.getElementById("form").onsubmit = function () { //调用用户名校验方法 checkUsername(); //调用密码校验方法 checkPassword(); return checkUsername() && checkPassword(); } document.getElementById("username").onblur = checkUsername; document.getElementById("password").onblur = checkPassword; } //校验用户名 function checkUsername() { //获取用户名的值 var username = document.getElementById("username").value; //定义正则表达式 var reg_username = new RegExp("^\w{6,12}$"); //判断值是否符合正则表达式的规则 var flag = reg_username.test(username); //提示信息 var s_username = document.getElementById("s_username"); if (flag) { s_username.innerHTML = "<img src='img/gou.png' width='25px' height='20px'/>" } else { s_username.innerHTML = "用户名输入有误！"; } return flag; } //校验密码 function checkPassword() { //获取用户名的值 var password = document.getElementById("password").value; //定义正则表达式 var reg_password = new RegExp("^\w{6,12}$"); //判断值是否符合正则表达式的规则 var flag = reg_password.test(password); //提示信息 var s_password = document.getElementById("s_password"); if (flag) { s_password.innerHTML = "<img src='img/gou.png' width='25px' height='20px'/>" } else { s_password.innerHTML = "密码输入有误！"; } return flag; } </script> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" id="form" method="get"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"> <input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="s_username" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"> <input type="password" name="password" id="password" placeholder="请输入密码"> <span id="s_password" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"> </td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>