事件捕获和事件冒泡的解释

Karaio
749 阅读2分钟

target.addEventListener

target.addEventListener(type, listener[, options]); [ ]表示或着加上, options

// 示例
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(click, func, capture);

options 可选

一个指定有关 listener 属性的可选参数对象。可用的选项如下：

  • capture: Boolean，表示在事件捕获阶段传播到当前 EventTarget 时触发。
  • once: Boolean，表示在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
  • passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如 调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
  • mozSystemGroup: 只能在 XBL 或者是 Firefox chrome 使用，这是个 Boolean，表示 listener 被添加到 system group。

useCapture 可选

Boolean，true表示在事件捕获阶段触发，为false表示在冒泡阶段触发。默认是false。下面继续事件捕获和事件冒泡的解释。

DOM标准事件流

Dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

<div id='box' >
    aaa
    <button id='btn'>
        bbb
    </button>
</div>

捕获事件案例

const box = document.getElementById("box");
const btn = document.getElementById("btn");
const func1 = function () {console.log('func1')}
const func2 = function () {console.log('func2')}

box.addEventListener('click', func1, true)
btn.addEventListener('click', func2, true)

执行捕获过程，

捕获事件，类似于上面的反过程。当点击 aaa 的时候会从 body 开始往内找，直到 div 标签有绑定事件，触发事件，继续往内找直到你点击的那个 target。

再执行冒泡过程。

  • 点击aaa，弹box；
  • 点击bbb，弹box，再弹btn。

冒泡事件案例

const box = document.getElementById("box");
const btn = document.getElementById("btn");
const boxFunc = function () {console.log('box')}
const btnFunc = function () {console.log('btn')}

box.addEventListener('click', boxFunc)
btn.addEventListener('click', btnFunc)

先执行捕获过程。

然后冒泡过程，

当你点击aaa的时候，从文本节点 aaa 开始找，文本节点没有绑定点击事件，继续向上找到 .box的div绑定了事件，触发。继续向上找，直到 body ，没有绑定事件，整个冒泡过程结束。

  • 所以点击aaa的时候，弹框 box；
  • 点击bbb的时候，弹框 btn, 再弹框 box。
avatar
文章
阅读
粉丝