JavaScript 中怎么在捕获阶段拦截并处理目标事件-js教程-PHP中文网

javascript中可通过addeventlistener第三个参数设为true启用捕获阶段监听，事件按window→document→根节点→目标父元素顺序向下传递，此时祖先元素可提前响应并用stoppropagation终止后续传播。

javascript 中怎么在捕获阶段拦截并处理目标事件

在 JavaScript 中，可以通过为事件监听器设置第三个参数为 true（即启用捕获阶段），在事件传播的捕获阶段拦截并处理目标事件。

明确事件传播的三个阶段

DOM 事件默认经历三个阶段：

捕获阶段：事件从 window → document → 根节点 → 目标父元素，逐层向下传递（目标元素尚未触发）
目标阶段：事件到达绑定的目标元素本身
冒泡阶段：事件从目标元素向上逐层回传至 window

只有显式开启捕获，监听器才会在第一阶段被触发。

使用 `addEventListener` 启用捕获

语法：element.addEventListener(type, handler, { capture: true }) 或简写为 element.addEventListener(type, handler, true)。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

第三个参数为 true 时，监听器在捕获阶段执行
此时即使事件最终目标是子元素，只要监听器绑定在祖先元素上，也能在事件“路过”时提前响应
多个捕获监听器按 DOM 树由外向内顺序触发（body 先于 div）

捕获阶段中阻止后续传播

若想在捕获阶段就终止事件继续传递（防止进入目标和冒泡阶段），可调用：

event.stopPropagation()：阻止事件继续在当前路径上传播（包括跳过目标和冒泡）
event.stopImmediatePropagation()：不仅阻止传播，还阻止同一阶段其他监听器执行

注意：event.preventDefault() 仅取消事件默认行为（如表单提交、链接跳转），不影响传播流程。

实际例子：在父容器捕获点击，拦截子按钮事件

假设 HTML 如下：

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）
});