event flow

哪怕一个web开发的初学者都会知道，当我们鼠标在button上点击时，会在button上触发一个click事件。但是：

• button是div的一个子Node；从界面上来看，在button里点击相当于在div里点击；那click事件也会触发在div上吗？
• 如果click事件也触发在div上，那它们会不会共用同一个事件对象？
• 如果click事件也触发在div上，谁的事件会先发生？
• click事件还会在哪些元素上面触发？
• 等等...

想解答上述问题，我们需要理解事件（Event）一个很重要的机制：事件流动（Event Flow）。

事件流动

"eventPhase"

“eventPhase”是“Event”下的一个属性，它指明当前event属于那一个阶段。
“eventPhase”可能是一下其中一个值：

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

捕获阶段（capture phase）

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

一般我们没太大需要监听捕获阶段的事件；如果你确实希望这么做，需要将addEventListener的第三个参数设置为true：

// 第三个参数设置是否为捕获阶段，默认为false

element.addEventListener('click', function() {}, true)

目标阶段（target phase）

例子里面，就是事件在button上触发的。addEventListener可以监听目标阶段的事件：

element.addEventListener('click', function() {})

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

冒泡阶段（bubble phase）

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

 

总结

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

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