117笔记问答在 JavaScript 中，事件处理程序的执行顺序取决于事件捕获和事件冒泡。事件捕获是从根节点开始，逐级向下传递事件，直到到达目标元素。事件冒泡则是从事件目标开始，向上回溯至根节点。
以下是如何在 JavaScript 中实现事件冒泡和捕获的示例：
- 为元素添加事件监听器并指定
useCapture参数：
element.addEventListener('click', function(event) {
console.log('捕获阶段');
}, true); // useCapture 设置为 true 表示在捕获阶段执行
element.addEventListener('click', function(event) {
console.log('冒泡阶段');
}, false); // useCapture 设置为 false 表示在冒泡阶段执行
- 创建一个简单的 HTML 结构来测试事件冒泡和捕获：
父元素
- 使用以下 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 参数的值，您可以在事件捕获或事件冒泡阶段执行自定义的处理程序。