码迷,mamicode.com
首页 > 其他好文 > 详细

DOM: EVENT FLOW

时间:2018-12-16 00:50:28      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:.com   tps   listen   order   div   属性   obj   冒泡   设置   

事件流动(EVENT FLOW)

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

                                                        捕获阶段-->目标阶段-->冒泡阶段

捕获阶段(capture phase)

捕获阶段的定义如下(w3c):The event object propagate through the target‘s ancestors from the defaultView to the target‘s parent.

事件对象在事件目标的祖先中上到下顺向传播,从最顶层的defaultView到事件目标的(直系)父元素。
捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父(主干)到子(分支)由上往下传播,被元素一层层地捕获。
文章开头的例子里面,捕获阶段的click事件会依次在document、body、div上触发:
document    1
  v
body    2
  v
div    3
  v
button

 

一般没太大需要监听捕获阶段的事件;如果确实希望这么做,需要将addEventListener的第三个参数设置为true:
 
// 第三个参数设置是否为捕获阶段,默认为false
element.addEventListener(‘click‘, function() {}, true)

目标阶段(target phase)

目标阶段的定义是(w3c):The event object arrive at the event object‘s event target.事件对象到达事件目标。

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

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

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

冒泡阶段(bubble phase)

冒泡阶段的定义(w3c):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上触发:

document    3
  ^
body    2
  ^
div    1
  ^
button

"bubbles"

Event下的bubbles属性标明该事件是否为可冒泡的。一旦该值为false,则说明 evnet不可冒泡,那其流动也会在第二阶段“目标阶段”后就终止。

 
 
摘自:
作者:butterandfly
链接:https://www.jianshu.com/p/382895a4027d
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

DOM: EVENT FLOW

标签:.com   tps   listen   order   div   属性   obj   冒泡   设置   

原文地址:https://www.cnblogs.com/LLLL-MM/p/10125477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!