【校招VIP】前端面试之事件捕获、时间冒泡总结- 校招VIP

转载声明：文章来源：https://blog.csdn.net/tzp1025029729/article/details/76999284

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

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

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

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

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