JavaScript中事件监听器可通过addEventListener第三个参数useCapture控制执行阶段：设为true在捕获阶段（自document向下）执行，适合预处理；false或省略则在冒泡阶段（自目标向上）执行，适合目标响应；同一元素可同时绑定两者，执行顺序为外层捕获→内层捕获→目标捕获→目标冒泡→内层冒泡→外层冒泡；阻止传播用stopPropagation或stopImmediatePropagation。

在 JavaScript 中，可以通过 addEventListener 的第三个参数（useCapture）来指定事件监听器是在捕获阶段还是冒泡阶段触发。设为 true 表示在捕获阶段执行，false（默认）表示在冒泡阶段执行。

在捕获阶段绑定处理函数

将 useCapture 设为 true，该监听器会在事件从 document 向目标元素传播（即“向下”）的过程中被调用：

• 适用于需要提前拦截事件、统一预处理（如权限校验、日志记录）的场景
• 注意：只有显式设置了 true 才会进入捕获阶段；父元素的捕获监听器总比子元素的先执行
• 示例：btn.addEventListener('click', handler, true)

在冒泡阶段绑定处理函数

省略第三个参数或设为 false，监听器会在事件从目标元素向上传播（即“向上”）到 document 的过程中触发：

• 这是最常用的方式，兼容性好，逻辑更符合直觉（先目标后祖先）
• 适合目标元素自身的响应逻辑，比如按钮点击后更新 UI
• 示例：btn.addEventListener('click', handler) 或 btn.addEventListener('click', handler, false)

同一事件在捕获和冒泡阶段都绑定处理函数

可以对同一个元素、同一个事件类型，同时注册捕获和冒泡监听器，它们会按阶段顺序分别执行：

Gradle 9.8.0

下载

立即学习“Java免费学习笔记（深入）”；

• 执行顺序是：外层捕获 → 内层捕获 → 目标自身（捕获与冒泡均可设，但目标上两者都会触发，且捕获先于冒泡）→ 内层冒泡 → 外层冒泡
• 目标元素上若同时绑定了捕获和冒泡监听器，捕获版会先执行，再执行冒泡版（即使它们绑定在同一元素）
• 示例：

  parent.addEventListener('click', () => console.log('parent capture'), true);
  child.addEventListener('click', () => console.log('child capture'), true);
  child.addEventListener('click', () => console.log('child bubble'), false);
  parent.addEventListener('click', () => console.log('parent bubble'), false);

  点击 child 时输出顺序为：parent capture → child capture → child bubble → parent bubble

阻止阶段传递的常用方法

如果想中断事件流，可使用以下方法：

• event.stopPropagation()：阻止事件继续向当前方向传播（不影响同阶段其他监听器，但会跳过后续阶段）
• event.stopImmediatePropagation()：不仅阻止传播，还立即终止当前阶段其余监听器的执行
• event.cancelBubble = true（旧写法，仅针对冒泡，不推荐）

不复杂但容易忽略：捕获阶段监听器无法通过 onclick="..." 或 element.onclick = ... 设置，只能用 addEventListener 并传入 true。