Event flow

Posted 2021-01-19 dyjun

事件流动

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

 

捕获阶段（capture phase）:

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

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

 

目标阶段（target phase）:

事件对象到达事件目标。

 

冒泡阶段（bubble phase）:

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

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

 

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

• 想监听捕获阶段的事件，可以这样：element.addEventListener(‘click‘, cb, true)，将第三个参数设置为true。
• 想监听冒泡阶段的事件，可以这样：element.addEventListener(‘click‘, cb,)，不使用第三个参数或将其设置为false。
• 而上述的任何一种监听方式都可以监听到目标阶段的事件。