DOM事件模型

捕获和冒泡

一个事件流分三个阶段，捕获阶段，目标阶段和冒泡阶段。

事件捕获：在触发 DOM 事件时，浏览器从外向内找监听函数的过程。

事件冒泡：在触发 DOM 事件时，浏览器从内向外找监听函数的过程。

在这两个过程中，有监听函数就调用，并提供事件信息，没有则跳过。

因为有捕获和冒泡两种传播方式，W3C 制定了一个标准。

addEventListener('click', fn, bool);

如果第三个参数 bool 值为 true，浏览器在捕获阶段执行监听，调用 fn，并提供事件信息；如果 bool 值不传或为 falsy 值，浏览器在冒泡阶段执行监听，调用fn，并提供时间信息。

取消冒泡

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

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

在 MDN 搜索相关 DOM 事件，其中 Bubbles 表示该事件是否冒泡，Cancelable 表示开发者是否可以阻止默认事件（推荐查看英文版）。

tips：

scroll 事件不可阻止默认动作，因为鲜有滚动才有滚动事件。要阻止滚动，可阻止 wheel 和 touchstart 的默认动作（注意找准滚动条所在元素），并用 CSS 让滚动条 width: 0; (因此时滚动条还能用，或者使用 overflow: hidden 取消滚动条，但此时 JS 仍可修改 scrollTop)