标签:.com tps listen order div 属性 obj 冒泡 设置
DOM事件不单单只会在一个Element上触发,它还会流向其他Element。事件的流动通常会经历这么三个阶段:
捕获阶段-->目标阶段-->冒泡阶段
捕获阶段的定义如下(w3c):The event object propagate through the target‘s ancestors from the defaultView to the target‘s parent.
document 1
v
body 2
v
div 3
v
button
addEventListener
的第三个参数设置为true:// 第三个参数设置是否为捕获阶段,默认为false
element.addEventListener(‘click‘, function() {}, true)
目标阶段的定义是(w3c):The event object arrive at the event object‘s event target.事件对象到达事件目标。
例子里面,就是事件在button上触发的。addEventListener
可以监听目标阶段的事件:
element.addEventListener(‘click‘, function() {})
如果事件是不可冒泡的,那整个事件流动会到此为止,不会发生下面的冒泡阶段。
冒泡阶段的定义(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
Event下的bubbles属性标明该事件是否为可冒泡的。一旦该值为false,则说明 evnet不可冒泡,那其流动也会在第二阶段“目标阶段”后就终止。
标签:.com tps listen order div 属性 obj 冒泡 设置
原文地址:https://www.cnblogs.com/LLLL-MM/p/10125477.html