----event flow----

Posted 2021-01-21 player-yenney

事件流动（Event Flow）作为事件（Event）一个很重要的机制，DOM事件不单单只会在一个Element上触发，它还会流向其他Element。

事件的流动通常会经历这么三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段

 

捕获阶段capture phase：

The event object propagate through the target‘s ancestors from the defaultView to the target‘s parent.

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

捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。

 

目标阶段 target phase：

The event object arrive at the event object‘s event target.

事件对象到达事件目标。

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

 

冒泡阶段 bubble phase：

The event object propagates through the target‘s ancestors in reverse order, starting with the target‘s parent and ending with the defaultView.

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

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