DOM 事件和事件委托

DOM 事件

事件，即文档或浏览器中发生的一些特定交互的瞬间，我们可以利用事件监听来预定事件，当事件发生的时候执行相应的处理程序。

W3C 规定，开发者自己可以选择把监听函数放在捕获阶段或者冒泡阶段，浏览器同时支持两种调用顺序，首先进行事件捕获，再执行事件冒泡。

addEventListener 的第三个参数，可以为 true 或 false。当第三个参数为 true时，绑定的是捕获阶段的事件，在捕获阶段，事件是由上到下依次触发的，反之当第三个参数为 false 时，绑定的是冒泡阶段的事件，在冒泡阶段，事件是由下到上触发的。

注意：e对象被传给所有的监听函数，事件结束之后，e对象就不存在了

从外向内找监听函数，叫事件捕获

从内向外找监听函数，叫事件冒泡

target 和 currentTarget 的区别： e.target 用户操作的元素 e.currentTarget 程序员监听的元素 this 是 e.currentTatget 不推荐使用

举例：
<div>
    <span>文字</span>
</div>
用户点击文字，此时 e.target 就是 span; e.currentTarget 就是 div

现在浏览器即使是在同一个按钮上添加捕获和冒泡的监听，也会按照先捕获再冒泡的顺序进行触发

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

e.stopPropagation() 可以中断冒泡，一般用于封装某些独立的组件

所有冒泡皆可取消，默认动作有的可以取消有的不能取消

有些事件不能阻止默认动作例子： MDN 搜索 scroll event 有Bubbles 和 Cancelable Bubbles 指该事件是否冒泡，所有的冒泡都可取消 Cancelable 指开发值是否可以阻止默认事件，与冒泡无关

如何阻止滚动：阻止滚轮事件、取消滚动条阻止 wheel 和 touchstart 的默认动作 → 使用 CSS 设置滚动条 width:0 CSS overflow:hidden 取消滚动条，此时 JS 仍然可以修改 scrollTop

事件委托就是利用事件冒泡，只需指定一个事件处理程序，就可以管理某一类型的所有事件，通过事件委托，可以做到通过在祖先元素添加一个事件处理程序，就可以控制其子孙元素的某些行为。

优点：