前端面试之事件捕获、时间冒泡总结

1、DOM 事件流

• 以程序的角度说，流是具有方向的数据。
• 事件流所描述的就是从页面中接受事件的顺序。
• 事件捕获：它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。
• 事件冒泡：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。
• DOM事件流包括三个阶段：

1. 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
2. 处于目标阶段
3. 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

• addEventListener最后一个参数，为true则代表使用事件捕获模式，false则表示使用事件冒泡模式。

2、浏览器中事件冒泡事件

每个 event 都有一个 event.bubbles 属性，可以知道它可否冒泡。（ W3C 定义的事件接口 ）

支持事件冒泡的事件：

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 存在的问题

1. IE下的 attachEvent 方法不支持捕获，和传统事件注册没多大区别(除了能绑定多个事件处理函数)。
2. IE的 attachEvent 方法存在内存泄漏问题！
3. 使用 attachEvent 时在事件处理函数内部，this指向了window，而不是obj！
4. 同一个函数可以被注册到同一个对象同一个事件上多次。

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、绑定事件的兼容性写法

参考链接：

浅谈JS事件冒泡： http://www.cnblogs.com/moqing/p/5590216.html

推荐-看懂此文，不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序： http://blog.csdn.net/aitangyong/article/details/43231111

关于JS事件冒泡与JS事件代理（事件委托）： http://blog.csdn.net/supercoooooder/article/details/52190100