一、DOM事件模型

DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播。这种传播分为三个阶段：

• 捕获阶段：从外向内找监听函数的阶段；
• 目标阶段：真正的目标节点正在处理事件的阶段；
• 冒泡阶段：从内向外找监听函数的阶段。

dom标准事件流的触发的先后顺序为：先捕获再冒泡。 即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

事件绑定 API

W3C：xxx.addEventListener('click', fn, bool)

这句函数可以用来绑定一个事件。如果bool不传或为falsy，就让fn走冒泡（当浏览器在冒泡阶段发现xxx有fn监听函数，就会调用fn，并提供事件信息。）；如果bool为true，就让fn走捕获（当浏览器在捕获阶段发现xxx有fn监听函数，就会调用fn，并提供事件信息。）。

取消冒泡

捕获不可取消，但冒泡可以。

• e.stopPropagation() 可中断冒泡，浏览器不再向上走

在MDN中进行搜索，可以查询到事件是否冒泡，以及是否可以阻止默认事件。以scroll为例：

• Bubbles ：该事件是否冒泡（所有冒泡都可取消）；
• Cancelable ：开发者是否可以阻止默认事件（Cancelable 与冒泡无关）。

scroll 事件不可阻止默认动作，阻止 scroll 默认动作没用，因先有滚动才有滚动事件，要阻止滚动，可阻止 wheel 和 touchstart 的默认动作（注：需找准滚动条所在的元素。阻止后滚动条还能用，可用 CSS 让滚动条 width: 0）。

二、事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个 …
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

• 场景一：当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。（节省监听，也就是内存数内存）
• 场景二：当我们需要监听目前并不存在的元素的点击事件，可以直接监听该元素的父元素，等点击的时候确认是否是自己想要监听的元素即可。（监听动态元素）