Event flow(事件流)

Posted 2021-01-25 shjnb

例子：
<div>
  <button id="btn">Click Me!</button>
</div>

对于上面例子，如果想知道点击后例子的运行顺序，此时就与Event flow(事件流动)相关了。

事件流动

DOM事件不单单只会在一个Element上触发，它还会流向其他Element。事件的流动通常会经历这么三个阶段：

捕获阶段 -> 目标阶段 -> 冒泡阶段

捕获阶段（capture phase）

定义：事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。

 

捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。
文章开头的例子里面，捕获阶段的click事件会依次在document、body、div上触发：

 

目标阶段（target phase）

定义：事件对象到达事件目标。

 

就如例子中，事件在button上触发。

如果事件是不可冒泡的，那整个事件流动会到此为止，不会发生下面的冒泡阶段。

 

冒泡阶段（bubble phase）

定义：事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）。

 

冒泡阶段发生在最后，这也是我们最为熟悉的一个阶段。在这阶段里事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒。
例子里面，冒泡阶段的click事件会依次在div、body、document上触发：