DOM事件流

[Ben-yby]

DOM事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

①->④是捕获阶段，④是当前目标阶段，④->⑦是冒泡阶段。

什么是事件捕获

• 事件捕获是网景最早提出的一种事件流，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
• 可以形象的比喻成将一个石头扔进水里，它会有一个下降到水底的过程，这个过程就是事件捕获阶段。
• 在事件捕获的概念下发生click事件的顺序应该是：document -> html -> body -> 目标元素
• 简而言之：由外至内

什么是事件冒泡

• 事件冒泡是微软最早提出的，与事件捕获相反，是由最具体的元素接收，然后逐级向上传递到DOM最顶层节点的过程。
• 可以形象的比喻成石头落入水中下降产生的泡泡从水底冒出水面的过程，这个就是事件冒泡阶段。
• 在事件冒泡的概念下发生click事件的顺序应该是：目标元素 -> body -> html -> document
• 简而言之：由内至外

事件冒泡与事件捕获发生冲突

• 一般情况下若事件不标明是事件冒泡还是事件捕获的话，默认情况都是按事件冒泡来处理，
  即事件监听器 element.addEventListener(event, function, useCapture) 的第三个参数为可选值，默认值为false。
• 若事件既有捕获也有冒泡的话，一般情况是先调用事件捕获阶段的事件，然后再调用事件冒泡阶段的事件

什么是事件委托？它有什么好处？

• 事件委托是利用事件冒泡机制处理指定一个事件处理程序，来管理某一类型的所有事件 利用冒泡的原理，将事件加到父级身上，触发执行效果；
• 这样只在内存中开辟一块空间，既节省资源又减少DOM操作，提高性能 动态绑定事件，列表新增元素不用进行重新绑定了