JavaScript中可通过addEventListener第三个参数设为true启用捕获阶段监听，事件按window→document→根节点→目标父元素顺序向下传递，此时祖先元素可提前响应并用stopPropagation终止后续传播。
在 JavaScript 中，可以通过为事件监听器设置第三个参数为 true（即启用捕获阶段），在事件传播的捕获阶段拦截并处理目标事件。
明确事件传播的三个阶段
DOM 事件默认经历三个阶段：
-
捕获阶段：事件从
window→document→ 根节点 → 目标父元素，逐层向下传递（目标元素尚未触发） - 目标阶段：事件到达绑定的目标元素本身
-
冒泡阶段：事件从目标元素向上逐层回传至
window
只有显式开启捕获，监听器才会在第一阶段被触发。
使用 addEventListener 启用捕获
语法：element.addEventListener(type, handler, { capture: true }) 或简写为 element.addEventListener(type, handler, true)。
立即学习“Java免费学习笔记（深入）”；
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 第三个参数为
true时，监听器在捕获阶段执行 - 此时即使事件最终目标是子元素，只要监听器绑定在祖先元素上，也能在事件“路过”时提前响应
- 多个捕获监听器按 DOM 树由外向内顺序触发（
body先于div）
捕获阶段中阻止后续传播
若想在捕获阶段就终止事件继续传递（防止进入目标和冒泡阶段），可调用：
-
event.stopPropagation()：阻止事件继续在当前路径上传播（包括跳过目标和冒泡） -
event.stopImmediatePropagation()：不仅阻止传播，还阻止同一阶段其他监听器执行
注意：event.preventDefault() 仅取消事件默认行为（如表单提交、链接跳转），不影响传播流程。
实际例子：在父容器捕获点击，拦截子按钮事件
假设 HTML 如下：
<div id="outer"><button id="btn">点我</button></div>JS 可这样拦截：
document.getElementById('outer').addEventListener('click', function(e) {
console.log('捕获阶段触发：', e.target.id); // 输出 "outer"（如果点击空白处）或 "btn"
if (e.target.id === 'btn') {
e.stopPropagation(); // 阻止事件到达 btn 自身及后续冒泡
console.log('已拦截按钮点击');
}
}, true); // ? 关键：true 表示捕获
// btn 自身的监听器（目标/冒泡阶段）将不会执行
document.getElementById('btn').addEventListener('click', () => {
console.log('按钮自己的监听器'); // 这行不会运行（因上面已 stopPropagation）
});
