1、事件触发三阶段
1、事件捕获阶段:事件从document开始往下查找,直到找到目标元素(target)
2、处于目标阶段
3、事件冒泡阶段:事件从目标元素开始向上传递冒泡,直到document
2、addEventListener
默认情况下事件使用冒泡事件,不使用捕获事件
addEventListener('click',fn,false)
false表示事件冒泡 ; true表示事件捕获
3、IE的attachEvent存在的问题
1、不支持捕获
2、attachEvent处理程序是在全局作用域中运行,this指向window(addEventListener中的this指的是绑定的目标元素)
3、存在内存泄露
4、 绑定事件的执行顺序
IE8绑定多个事件按添加的相反顺序执行;IE6-7随机执行
addEventListener是按照添加事件的顺序执行
5、onclick和addEventListener的区别?
1、onclick事件在同一时间只能指向唯一对象,给同一个目标对象绑定多个onclick事件只会执行最后一个,最后一个会覆盖前面的,但是通过addEventListener绑定多个点击事件的话会依次执行
2、addEventListener可以控制listener的触发阶段(冒泡或者捕获),onclick不行
3、取消事件,el.onclick=null,addEventListener需要使用removeListener来移除,但是如果通过addEventListener绑定的是匿名函数,那么将无法移除
6、阻止事件传播和默认行为
阻止事件传播:在w3c中使用e.stopropagation();;在IE中设置cancelBubble=true
阻止默认行为:在w3c中使用preventDefault();;在IE中使用window.event.returnValue=false
网友评论