JavaScript中如何实现事件的冒泡与捕获

在 JavaScript 中，事件处理程序的执行顺序取决于事件捕获和事件冒泡。事件捕获是从根节点开始，逐级向下传递事件，直到到达目标元素。事件冒泡则是从事件目标开始，向上回溯至根节点。

以下是如何在 JavaScript 中实现事件冒泡和捕获的示例：

1. 为元素添加事件监听器并指定 useCapture 参数：

element.addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true); // useCapture 设置为 true 表示在捕获阶段执行

element.addEventListener('click', function(event) {
  console.log('冒泡阶段');
}, false); // useCapture 设置为 false 表示在冒泡阶段执行

2. 创建一个简单的 HTML 结构来测试事件冒泡和捕获：

<div id="parent">
  父元素
  <button id="child">子元素</button>
</div>

3. 使用以下 JavaScript 代码测试事件冒泡和捕获：

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(event) {
  console.log('父元素捕获阶段');
});

child.addEventListener('click', function(event) {
  console.log('子元素捕获阶段');
});

parent.addEventListener('click', function(event) {
  console.log('父元素冒泡阶段');
});

child.addEventListener('click', function(event) {
  console.log('子元素冒泡阶段');
});

当点击子元素时，事件处理程序将按照以下顺序执行：

• 子元素捕获阶段
• 父元素捕获阶段
• 子元素冒泡阶段
• 父元素冒泡阶段

通过调整 useCapture 参数的值，您可以在事件捕获或事件冒泡阶段执行自定义的处理程序。