DOM事件流

1. 什么是DOM事件流？

事件流简单来说就是事件执行的顺序流。DOM树中有大量的元素，元素之间出现嵌套时，给父子元素同时设置了事件，父子元素的事件执行会按照某种顺序执行，这就是事件流。当然，嵌套层级不限，最终事件流会贯穿当前元素和根元素()之间整个嵌套过程。

专业解读：

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

2. DOM事件流的分类？分别什么含义？

DOM同时支持两种事件模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
顺序： 从下向上 即: 某个具体的元素 -> … -> body -> html -> document -> window

注：默认addEventListener()使用冒泡型事件流。

捕获型事件流（俗称挖洞）：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

顺序：

从上向下 即: window -> document -> html -> body -> … -> 某个具体的元素 capture捕获， bubble冒泡。

3. DOM事件流的三个阶段？

DOM2级事件规定的事件流包括三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

4. 事件委托和事件代理？

事件委托： 也可以成为事件代理，也就是将原本绑定在子元素身上的事件 委托 给父元素。让父元素去监听事件。其原理是利用事件冒泡。

一个事件触发后，会在子元素和父元素之间传播，这个传播分三个阶段：
1.捕获阶段：从window对象依次向下传播，到达目标节点，即为捕获阶段。捕获阶段不会响应任何事件
2.目标阶段：在目标节点触发事件，即为目标阶段
3.冒泡阶段：从目标阶段依次向上传播，到达window对象，即为冒泡阶段。【事件代理就是利用事件冒泡的机制把里层元素需要响应的事件绑定到外层元素身上】

事件委托的优点： 可以减少事件的注册，节省内存占用。也可以实现当新增对象时无需再次对其绑定事件。

事件委托口语化描述：有两个元素a和b, b将来要嵌套在a中，但b还不存在，将来再创建，这时想给b设置事件，而b此时不存在，无法设置事件，怎么办呢？b就委托a元素帮它设置事件，我们称事件委托。这是站在b的角度考虑问题时叫事件委托。站在a的角度考虑问题，a代理了b给b绑定了事件，称事件代理。所以事件委托和事件代理其实是一回事，只是站的角度不同而以。

注意：事件委托一般应用在虚拟DOM场景下，即有些DOM元素还不存在，就想给它们绑定事件，需要借助它们的父元素帮它们绑定事件。

5. 阻止事件传播

e.stopPropagation()冒泡机制下，阻止事件的进一步往上冒泡。捕获机制下，阻止事件的进一步向下捕获。

e.cancelBubble 是e.stopPropagation() 的曾用名，也可以阻止冒泡和捕获
e.cancelBubble = true;

// 以下两种了解：有时候并不阻止传播（取巧行为）。
e.preventDefault()用于取消事件的默认操作,比如链接的跳转或者表单的提交，主要是用来阻止标签的默认行为

return false事件处理过程中，阻止了事件冒泡，也阻止了默认行为

事件流参考:

https://zhuanlan.zhihu.com/p/114276880
https://segmentfault.com/a/1190000013265547