事件流
1. 事件流描述的是从页面中接收事件的顺序
2. 事件冒泡(event bubble):事件从开始时由最具体的元素(就是嵌套最深的那个节点)开始,逐级向上传播到较为不具体的节点(就是Document)
<!doctype html> <html> <head> <title>事件冒泡</title> </head> <body> <div id = 'myDiv'> 点击这里 </div> </body> </html> /* 如果点击了div元素,那么这个click事件会按如下顺序传播 1. <div> 2. <body> 3. <html> 4. document click事件首先在div元素上发生,也就是我们点击的元素,然后body元素发生点击事件……一层一层往上冒 */
3. 事件捕获:不太具体的节点(Document根节点)更早接收到事件,最具体的节点最后接收到事件,刚好与冒泡相反
4. DOM事件流三阶段:
1. 事件捕获阶段:首先发生,为截获事件提供机会
2. 处于目标阶段:事件在此触发
3. 事件冒泡阶段:在这个阶段对事件作出相应
4. 跨浏览器的事件处理函数【可复用,最好手写】:
var EventUtil = { addHandler:function(element , type , handler){ if(element.addEventListener){ element.addEventListener(type , handler ,false); } else if(element.attachEvent){ element.attachEvent('on'+type , handler); } else{ element['on'+type] = handler; } } removeHandler:function(element , type , handler){ if(element.removeEventListener){ element.removeEventListener(type , handler ,false); } else if(element.detachEvent){ element.detachEvent('on'+type , handler); } else{ element['on'+type] = Null; } } getEvent:function(event){ return event?event:window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } };
5. 事件处理程序:响应某个事件的处理函数就是事件处理函数
1. 常用的两个方法:用于处理指定和删除事件处理函数的操作方法:addEventListener()/removeEventListener()
2. 这两个方法接受3个参数:(事件名,处理函数,[,布尔值])。布尔值默认为false,表示在冒泡阶段调用事件处理函数,true表示在捕获阶段调用事件处理函数
btn.addEventListener('click' , function(){} , false) //可添加多个事件处理函数 //移除↓ btn.removeEventListener('click' , handler [, false])//移除的事件处理函数不能是匿名函数
6. 事件对象:在触发DOM的某个事件时,会产生一个事件对象:event,这个对象包含着所有的事件信息
1. currentTarget:绑定事件处理函数的那个目标。在事件处理程序内部,this始终等于currentTarget的值
2. target:事件被触发的那个目标
3. type:事件的类型:是click,还是mouseover……当需要一个函数处理多种事件时可以:
var handler = function(event){ switch(event.type){ case 'click': function(){} break; case 'mouseover': function(){} break; case 'mouseout': function(){} break; } } btn.onclick = handler; btn.mouseover = handler; btn.mouseout = handler;
4. 阻止事件的默认行为,使用preventDefault()方法,只有cancelable属性为true的事件,才能用此方法阻止
5. stopPropagation():停止事件传播,取消以后事件的捕获和冒泡
6. stopImmediatePropagation() 的功能比stopPropagation 多一些,除了可以阻止事件冒泡之外,还可以把这个元素绑定的同类型事件函数也阻止了。
7. 主要的事件类型:
1. UI事件:用户与页面元素交互时触发
1. load事件:页面完全加载后(包括所有图像、js、css等外部资源)触发。图像上也可以触发本事件
2. unload事件:只要用户从一个页面切换到另一个页面(重新加载页面、点击某个离开页面的链接等)就会发生unload事件
3. resize事件:浏览器窗口宽高变动(包括最大化最小化)
4. scroll事件
2. 焦点事件:(最常用的)
1. focus
2. blur
3. 鼠标事件
1. click
2. dbclick
3. mousemove
4. mouseenter
5. …………
6. event.clientX/Y:事件发生时,鼠标指针位置在**客户区**的坐标
7. event.pageX/Y:事件发生时,鼠标指针位置在**页面中**的坐标
8. event。screenX/Y:事件发生时,鼠标指针位置在**整个电脑屏幕**的坐标
4. 滚轮事件
1. mousewheel()
5. 文本事件
1. textInput():用户在可编辑区输入字符触发
6. 键盘事件
1. keydown():按下键盘任意键触发,按住不放重复触发
2. keypress():按下键盘字符键触发,按住不放重复触发
3. keyup():释放按键时触发
7. 合成事件:基本无用
8. 变动事件:
9. 设备事件:
1. orientationchange事件
2. devicemotion事件:设备移动
3. 触摸与手势事件
1. touchstart
2. touchmove
3. touchend:手指从屏幕移开时触发
4. gesturestart:一个手指按在屏幕上,另一个手指触摸屏幕时触发
5. gesturechange:
6. gestureend:手指从屏幕上移开
8. 事件代理【重点】:
1. 事件处理函数过多,性能势必下降,解决方法就是事件委托(代理)
2. 事件代理利用了事件冒泡原理,只指定一个事件处理程序,用来管理所有类型的所有事件。比如:可以为整个页面指定一个click事件处理函数,而不用给每个需要单击的元素分别添加事件处理函数
<ul> <li id = 'li1'></li> <li id = 'li2'></li> <li id = 'li3'></li> </ul> //为每个li元素都添加一个事件处理函数,太麻烦。只需要给DOM树中尽量最高层添加事件处理函数 EventUtil.addHandler(ul , 'click' ,handler); function handler(event){ switch(event.target.id){ case 'li1': function(){}; break; case 'li2': function(){}; break; case 'li3': function(){}; break; } } ------------------解析------------------ /* 1. 用事件委托只为ul元素添加了一个click事件,由于所有的li元素都是ul的子节点,在li上的事件会往上冒泡,最终会冒到ul上,触发在ul上绑定的事件处理函数。 2. 因为只为一个DOM元素,添加了一个事件处理函数,占用内存更小,速度更快 3. 如果可行的话,可以考虑为Document添加一个事件处理函数,优点如下: 1. Document对象访问很快,可以在页面生命周期的任何时间为它添加事件处理函数 2. 在页面中设置事件处理函数所需的时间更少,对DOM的引用更少 3. 最适合采用的事件包括:click、mousedown/up、keydown/up/press */