JavaScript中的事件冒泡和事件捕获

在 JavaScript 中，当一个事件被触发时，它会从最内层的元素开始向外传播，直到达到文档的最外层元素或者被停止。这一过程被称为事件冒泡。

与事件冒泡相对的是事件捕获。事件捕获的过程与事件冒泡相反，它会从最外层的元素开始向内传播，直到达到最内层元素或者被停止。

事件冒泡

事件冒泡是默认的事件传播方式。当一个元素上的事件被触发时，它会先被该元素处理，然后再逐级向上传递到父元素，直到顶层文档对象。

这个过程和水泡从水中冒起，慢慢扩散到水面一样，所以称为事件冒泡。

下面是一个事件冒泡的示例：

<div id="outer" style="border: 1px solid red;">
  <div id="inner" style="border: 1px solid black;">
    Click Me!
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  console.log('Outer element clicked.');
});

inner.addEventListener('click', function() {
  console.log('Inner element clicked.');
});

当点击内部元素时，事件将被依次派发到内层元素和外层元素。

输出结果如下：

Inner element clicked.
Outer element clicked.

如果我们希望阻止事件冒泡继续传递，可以通过调用 event.stopPropagation() 方法来实现。

事件捕获

事件捕获从 DOM 树的根节点开始监听事件，并逐级向下传递，直到达到目标元素。这与事件冒泡不同，事件捕获是从父元素到子元素的传递过程。

下面是一个事件捕获的示例：

<div id="outer" style="border: 1px solid red;">
  <div id="inner" style="border: 1px solid black;">
    Click Me!
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  console.log('Outer element clicked.');
}, true);

inner.addEventListener('click', function() {
  console.log('Inner element clicked.');
}, true);

当点击内部元素时，事件将被依次派发到外层元素和内层元素。

输出结果如下：

Outer element clicked.
Inner element clicked.

如果我们希望终止事件捕获的传播，可以通过调用 event.stopPropagation() 方法来实现。

停止事件传播

无论是事件冒泡还是事件捕获，我们都可以使用 event.stopPropagation() 方法来停止事件继续传播。通常情况下，我们只需要在嵌套元素间传递事件时阻止传播即可，避免事件触发多次。

下面是一个停止事件传播的示例：

<div id="outer" style="border: 1px solid red;">
  <div id="inner" style="border: 1px solid black;">
    Click Me!
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function(event) {
  console.log('Outer element clicked.');
  event.stopPropagation();
}, true);

inner.addEventListener('click', function(event) {
  console.log('Inner element clicked.');
  event.stopPropagation();
}, true);

当点击内部元素时，只会触发内层元素的事件处理程序。

输出结果如下：

Inner element clicked.

参考文献

• MDN Web Docs
• JavaScript 事件冒泡与捕获