1 事件
1.1 事件分类
- 事件分为DOM0级事件和DOM2级事件
- DOM0级事件：1）在元素的私有属性上；2）同一个元素，同一个行为，只能绑定同一个方法；如果多次绑定，后面的方法会覆盖前面的方法；3）只能发生在事件流的冒泡阶段；
- 绑定：
oDiv.onclick=function(){xxx}; - 解绑：
oDiv.onclick=null;;
- 绑定：
- DOM2级事件：1）在元素所属的EventTarget这个类的原型上；2）同一个元素(ele)，同一个行为(type)可以绑定多个不同的方法(fn)；3）可以人为的控制发生事件流的哪个阶段（捕获，冒泡）(userCapture=true/false)；
- 标准浏览器(包括IE8,9)：
- 绑定：
oDiv.addEventListener(type,fn,userCapture)，如oDiv.addEventListener("click",fn,true) - 解绑：
oDiv.removeEventListener(type,fn,userCapture) - 注意：默认为冒泡，true代表捕获，false代表冒泡；绑定时fn可以是匿名函数，但是解绑时fn必须是有名函数；
- 绑定：
- IE7,8浏览器：
- 绑定：
oDiv.attachEvent("on"+type,fn)，如oDiv1.attachEvent("onclick",fn1) - 解绑：
oDiv.detachEvent("on"+type,fn) - 注意：默认为冒泡，只发生在冒泡阶段；绑定时fn可以是匿名函数，但是解绑时fn必须是有名函数；
- 绑定：
- 标准浏览器(包括IE8,9)：
- 元素的原型链：元素本身-> HTMLDivElement ->HTMLElement-> Element-> Node-> EventTarget-> Object
- DOM0级事件：1）在元素的私有属性上；2）同一个元素，同一个行为，只能绑定同一个方法；如果多次绑定，后面的方法会覆盖前面的方法；3）只能发生在事件流的冒泡阶段；
1.2 事件流
- 事件流：
- 由三部分构成：捕获 target事件源 冒泡；
- 由两部分构成：捕获 冒泡；
- 冒泡：从里向外依次触发事件，父级和祖级的该事件也都会被触发，如果父祖级上没有绑定行为和fn，就不会显现出来，但是该类事件会被触发；
- 捕获：从外向里依次触发事件，子孙级该事件也都会被触发，如果子孙级上没有绑定行为和fn，就不会显现出来，但是该类事件会被触发；
- 事件源：在触发事件时，会产生一个事件对象，而事件对象上的target和srcElement会保存住事件源元素，无论从父级还是祖级上获取事件对象的target属性，都拿到的是触发事件时的元素；
- 注意：触发顺序：先捕获，后冒泡；
- 实例验证：
- 知识点：
- 当点击div3时，会由里向外依次弹出div3,div2,div1;
- 当点击div2时，会由里向外依次弹出div2,div1;
- DOM0级事件只能发生在冒泡阶段
- 注：只要触发div3的点击事件，div1，div2的点击事件都会被触发，不管他俩是否添加行为，点击事件都会被触发，只不过是看不到任何响应；
- 当点击div3后，会依次弹出div3，div2，div1,然后一起打印e.target，获取的都是div3元素；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <style> div{ padding: 100px; font-size: 50px; } .div1{ background-color: red; } .div2{ background-color: blue; } .div3{ background-color: gold; } </style> </head> <body> <div class="div1">div1 <div class="div2">div2 <div class="div3">div3</div> </div> </div> <script> var oDiv1=document.getElementsByTagName("div")[0]; var oDiv2=document.getElementsByTagName("div")[1]; var oDiv3=document.getElementsByTagName("div")[2]; oDiv1.onclick=function (e) { console.log("div1"); console.log(e.target);//打印结果：<div class="div3">div3</div> }; oDiv2.onclick=function (e) { console.log("div2"); console.log(e); console.log(e.target);//打印结果：<div class="div3">div3</div> }; oDiv3.onclick=function (e) { console.log("div3"); console.log(e); console.log(e.target);//打印结果：<div class="div3">div3</div> }; </script> </body> </html> - 知识点：
1.3 事件对象
- 事件类型：
- 鼠标事件：
- onclick: 鼠标点击事件；
- ondbclick: 鼠标双击事件；
- onmouseover: 鼠标移上事件；
- onmousrout: 鼠标移出事件；
- onmouseenter: 鼠标移上事件；
- onmouseleave: 鼠标移出事件；
- 区别：onmouseover onmouseout onmouseenter onmouseleave四者
- onmouseover onmouseout两者为一对，代表鼠标移入移出事件，子级会发生冒泡事件；
- onmouseenter onmouseleave两者为一对，也代表鼠标移入移出事件，不支持冒泡事件，子级不会影响父级；
- 系统事件：
- onload: 页面加载事件；
- onresize: 页面大小拉伸事件；
- onscroll: 滚轮事件；
- 键盘事件：
- onkeydown: 键盘按下事件；
- onkeyup: 键盘抬起事件
- onkeypress: 键盘按下抬起事件；
- 表单事件：
- onfocus: 表单聚焦事件；
- onblur: 表单失焦事件；
- autofocus: 自动聚焦，值为布尔值，true为自动聚焦，false为不自动聚焦，默认为false；
- 鼠标事件：
- 事件对象：
- 定义：当发生事件后，会向函数中传入一个实参，传入的实参为事件对象(标准浏览器)
- 代码：
oDiv.onclick=function(e){xxx} - 在标准浏览器下，事件发生后，会向函数传入实参，即事件对象；也可以通过window.event来获取事件对象；
- 在IE6,7,8浏览器下，事件发生后，不会向函数传入实参，获得的形参值为undefined，所以只能通过window.event来获得事件对象；
- 事件对象的兼容处理：
e=e || window.event;
- 代码：
- 事件源：指的是发生事件的当前元素，等同于事件发生后，匿名函数中的this；
- 在标准浏览器下：事件对象上存在两个属性，一个是target属性，一个是srcElement属性，通过这两个属性可以获取事件源；如：
e.target或e.srcElement; - 在IE6,7,8浏览器下：事件对象上不存在target属性，只存在srcElement属性，只能通过srcElement属性来获取事件源；
- 事件源的兼容处理：
e.target=e.target || e.srcElement;
- 在标准浏览器下：事件对象上存在两个属性，一个是target属性，一个是srcElement属性，通过这两个属性可以获取事件源；如：
- 事件行为：
- 定义：事件行为指的是添加的什么事件，如onclick事件，行为是点击行为，onkeyup事件，行为指的就是键盘抬起行为
- 属性：type，通过事件对象上的type属性可以获取事件行为
- 代码：
e.type;如onclick事件的行为是click，onkeyup事件的行为是keyup等；
- 定义：当发生事件后，会向函数中传入一个实参，传入的实参为事件对象(标准浏览器)
- 鼠标事件对象：MouseEvent
- 坐标属性：clientX clientY
- 定义：距离当前可视区左上角的坐标，所有浏览器兼容；
- 代码：
console.log(e.clientX,e.clientY)
- 坐标属性：pageX pageY
- 定义：距离第一屏左上角的坐标,IE浏览器(IE6,7,8)不兼容；
- 代码：
console.log(e.pageX,e.pageY) - 与clientX,clientY的区别：二者相差的是浏览器卷去的长度
- 兼容处理代码：
e.pageX=e.pageX || (e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)) e.pageY=e.pageY || (e.clientY+(document.documentElement.scrollTop || document.body.scrollTop))
- 坐标属性：clientX clientY
- 键盘事件对象：KeyboardEvent
- 键盘码属性：keyCode;
- 定义：每个键盘对应一个键盘码，如：键盘0代表48，键盘9代表57，删除键backpace代表8；
- 代码：
e.keyCode;
- 阻止默认事件兼容代码：
e.preventDefault?e.preventDefault():e.returnValue=false; - 实例：文本框内只能输入数字或者删除数字，其他的不能输入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件实例</title> </head> <body> <input type="text" placeholder="输入有效数字"/> <script> var oBtn=document.getElementsByTagName("input")[0]; oBtn.onkeydown=function (e) { e=e ||window.event; if((e.keyCode<48 || e.keyCode>57) && e.keyCode!==8){ //满足条件的清除默认事件 e.preventDefault?e.preventDefault():e.returnValue=false; } } </script> </body> </html> - 键盘码属性：keyCode;
