理解DOM事件流的三个阶段

流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流，都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种，分别是事件冒泡和事件捕获。

 在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，即事件处理过程的三个阶段：捕获，目标，冒泡；

（1）捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。）在目标元素对象本身上注册的捕获事件处理程序不会被调用。

（2）目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。

（3）冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点（我们平时用的事件绑定就是利用的事件冒泡的原理）

事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件

事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对向上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）。

事件冒泡过程，是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。

这个方法就是:stopPropagation()

stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

 

转载于:https://www.cnblogs.com/asituhaitang/p/8855354.html