泡沫与捕获

最终结论

各位开发者大家好，

事件冒泡和捕获是 HTML DOM API 中事件传播的两种方式。当一个事件发生在另一个元素内部的元素中，并且两个元素都注册了该事件的句柄时，事件就会冒泡。
冒泡时，事件首先被最内层的元素捕获并处理，然后再传播到最外层的元素。

通过捕获，事件首先被最外层元素捕获，然后传播到内部元素。
在本文中，我将尝试解释事件监听器中可用的可选参数以及它们之间的区别。开始吧！

目标.addEventListener（类型，监听器[，useCapture]）；

target：一个区分大小写的字符串，表示要监听的事件类型。type
：事件的类型
listener：事件发生时触发的函数。

useCapture（可选）：一个布尔值，指示此类事件是否先被派发到已注册的监听器，然后再派发到 DOM 树中位于其下方的任何 EventTarget。在树中向上冒泡的事件不会触发指定使用捕获的监听器。事件冒泡和捕获是当一个元素嵌套在另一个元素中时，传播事件的两种方式，当这两个元素都注册了该事件的句柄时。事件传播模式决定了元素接收事件的顺序。有关详细说明，请参阅 DOM 3 级事件和 JavaScript 事件顺序。如果未指定，useCapture 默认为 false。

在这篇文章中，我将尝试解释第三个可选选项的含义。
因此，我们设置了一个基本布局，将三个框嵌套在一起。

我们将向 box-1、box-2 和 box-3 添加一个带有“click”事件的 eventListener，并在事件触发时调用匿名函数内的控制台日志。

document.querySelector('.box-1').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

document.querySelector('.box-2').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

document.querySelector('.box-3').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

你觉得当我点击方框3时会发生什么？我们来看一下。

示例结论

当我们点击 .box-3 时，事件被触发，并在控制台中打印 Box-3, Box-2, Bob-1 。因此，正如我们在图中看到的那样，事件从被点击的元素开始向上触发。这就是冒泡，首先由最内层的元素捕获并处理，然后传播到最外层的元素。

现在我们来看一下捕获。要使用捕获事件传播，必须将 addEventListener 中的第三个（可选）参数设置为 true。

document.querySelector('.box-1').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);

document.querySelector('.box-2').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);

document.querySelector('.box-3').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);