转载:https://blog.csdn.net/tzp1025029729/article/details/76999284
1、DOM 事件流
- 以程序的角度说,流是具有方向的数据。
- 事件流所描述的就是从页面中接受事件的顺序。
- 事件捕获:它认为当某个事件发生时,父元素应该更早接收到事件,具体元素则最后接收到事件。
- 事件冒泡:事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。
- DOM事件流包括三个阶段:
- 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
- 处于目标阶段
- 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
- addEventListener最后一个参数,为true则代表使用事件捕获模式,false则表示使用事件冒泡模式。
2、浏览器中事件冒泡事件
支持事件冒泡的事件:
beforeinput | click | compositionstart | compositionupdate | compositionend | dblclick | focusin | focusout | input | keydown | keyup | mousedown | mouseup | mousemove | mouseout | mouseover | scroll | select | wheel
不支持事件冒泡的事件:
abort | blur | error | focus | load | mouseenter | mouseleave | resize | unload
3、addEventListener
默认情况下,事件使用冒泡事件流,不使用捕获事件流。
addEventListener事件可以显示的指定是使用事件捕获还是事件冒泡。
ele.addEventListener('click',doSomething2,true) ;
- true=捕获
- false=冒泡
4、IE 的 attachEvent 存在的问题
- IE下的 attachEvent 方法不支持捕获,和传统事件注册没多大区别(除了能绑定多个事件处理函数)。
- IE的 attachEvent 方法存在内存泄漏问题!
- 使用 attachEvent 时在事件处理函数内部,this指向了window,而不是obj!
- 同一个函数可以被注册到同一个对象同一个事件上多次。
5、addEventListener 和 attachEvent 的区别
二者有个本质上的区别,attachEvent 的事件处理程序会在
全局作用域
中运行,
this等于window对象
,而 addEventLinstener 添加的事件处理程序是在
其依附的元素的作用域
中运行的,
this等于绑定元素对象
。
6、绑定多个事件的执行顺序:
IE8 绑定多个事件按添加的相反顺序执行,IE6 和 IE7 是随即执行的,非 IE 也就是addevenetListener 按添加的顺序执行。
7、el.onclick和addEventListener和attachEvent有什么区别呢?
本质的区别是 el.onclick 相当于在标签上写 onclick,用 addEventListener 和 attachEvent 是通过 DOM 接口去绑定事件。
一个 html 文档的解析是有顺序的,先解析标签项,再解析 DOM 项,el.onclick 事实上相当于写在标签上,通过标签的 onclick 属性输入到文档,然后由文档解析成事件的。而后者,要在文档解析完成以后,通过文档的 DOM 接口去绑定的事件,虽然结果是一样的,都是 click 事件,但是过程是不同的。
onclick 给事件绑定多个监听器时只会执行最后一个,而 addEventListener 和 attachEvent 会执行多个。
8、el.onclick和addEventListener和attachEvent 绑定的事件怎么取消?
- el.onclick:el.οnclick=null; 这样就可以取消绑定在 el 上的事件处理程序了。
- 通过 addEventListener() 添加的事件处理程序只能通过 removeEventListener() 来移除,并且移除时传入的参数与添加处理程序时使用的参数相同。通过addEventListener() 添加的匿名函数将无法移除。
- 通过 attachEvent() 添加的事件处理程序要通过 detachEvent() 来移除,其他的情况和 addEventListener() 一样。
9、阻止事件传播和默认行为
阻止事件传播:
- 在W3c中,使用 e.stopPropagation() 方法
- 在IE下设置cancelBubble = true;
- 封装阻止事件冒泡函数:
取消默认行为:
- 在W3c中,使用preventDefault()方法;
- 在IE下设置window.event.returnValue = false;
10、绑定事件的兼容性写法
参考链接:
推荐-看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序:
http://blog.csdn.net/aitangyong/article/details/43231111
关于JS事件冒泡与JS事件代理(事件委托):
http://blog.csdn.net/supercoooooder/article/details/52190100