JavaScript 中怎么区分点击事件来自捕获还是冒泡-js教程-PHP中文网

javascript中无法直接判断点击事件来自捕获或冒泡阶段，关键在于addeventlistener第三个参数：true或{capture:true}为捕获阶段，false/undefined/{capture:false}为冒泡阶段；可通过e.eventphase值（1/2/3）在监听函数内确认当前阶段。

javascript 中怎么区分点击事件来自捕获还是冒泡

JavaScript 中不能直接“判断”一次点击事件是来自捕获还是冒泡——因为一次点击必然同时经历捕获、目标、冒泡三个阶段，而你绑定的监听器只会在它被指定的那个阶段触发。区分的关键在于：你把监听器注册在哪个阶段，它就在哪个阶段执行。

看 addEventListener 的第三个参数

这是最直接、最可靠的区分方式：

true 或 { capture: true } → 监听器在捕获阶段执行
false、undefined 或 { capture: false } → 监听器在冒泡阶段执行（默认行为）

例如：

const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('捕获'), true);
btn.addEventListener('click', () => console.log('冒泡'), false);

点击按钮时，控制台先输出“捕获”，再输出“冒泡”——不是事件本身有属性标明来源，而是你用不同参数注册了两个监听器，分别守在不同阶段。

通过事件传播顺序反推监听器所处阶段

在嵌套结构中，观察执行顺序可辅助验证：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

如果外层元素的监听器比内层元素更早执行 → 很可能是在捕获阶段（从外向内）
如果内层元素的监听器比外层更早执行 → 很可能是在冒泡阶段（从内向外）

比如：<div id="outer"><div id="inner">点我</div></div>

outer.addEventListener('click', () => console.log('outer'), true); // 捕获
inner.addEventListener('click', () => console.log('inner'), false); // 冒泡

点击 inner 时输出：outer → inner，说明 outer 是捕获阶段触发的。

注意：event 对象没有 isCapturing 属性

浏览器原生 event 对象不提供类似 e.isCapturing 这样的字段来告诉你“当前这个事件正在捕获阶段”。但你可以用 e.eventPhase 获取当前所处的阶段数值：

1 = 捕获阶段（Event.CAPTURING_PHASE）
2 = 目标阶段（Event.AT_TARGET）
3 = 冒泡阶段（Event.BUBBLING_PHASE）

所以，在监听函数内部可以这样检查：

element.addEventListener('click', e => {
  if (e.eventPhase === Event.CAPTURING_PHASE) {
    console.log('我在捕获阶段运行');
  } else if (e.eventPhase === Event.BUBBLING_PHASE) {
    console.log('我在冒泡阶段运行');
  }
});