event flow

Posted 2021-01-20 xiajiejie

• Event.NONE，0，没有事件需要处理
• Event.CAPTURING_PHASE，1，捕获阶段
• Event.AT_TARGET，2，目标阶段，事件对象到达事件目标上
• Event.BUBBLING_PHASE，3，冒泡阶段

捕获阶段（capture phase）

The event object propagate through the target‘s ancestors from the defaultView to the target‘s parent.
事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。

 

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

//监听 为true
// 第三个参数设置是否为捕获阶段，默认为false
element.addEventListener(‘click‘, function() {}, true)

目标阶段（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）。

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

 

若一个元素（div）是目标元素（button）的祖先，那事件对象会在该元素上触发两次：一次是捕获阶段（1）的，另一次是冒泡阶段（3）的。当事件对象在事件目标元素（button）上触发时，事件流动进入了目标阶段（2）。