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。
  • 而上述的任何一种监听方式都可以监听到目标阶段的事件。

posted on 2018-11-25 19:33  KAMNA  阅读(79)  评论(0编辑  收藏  举报