JavaScript 中怎么判断当前事件是否处于捕获或者冒泡阶段-js教程-PHP中文网

event.eventphase属性返回1、2、3分别表示捕获阶段、目标阶段、冒泡阶段；它反映事件当前真实所处阶段，与addeventlistener的usecapture参数无关。

javascript 中怎么判断当前事件是否处于捕获或者冒泡阶段

在 JavaScript 中，可以通过事件对象的 event.eventPhase 属性来判断当前事件所处的阶段。

eventPhase 的三个可能值

eventPhase 是一个只读属性，返回一个整数，表示事件当前所处的阶段：

1：表示事件处于捕获阶段（Capturing Phase）
2：表示事件处于目标阶段（Target Phase），即事件到达绑定事件的元素本身
3：表示事件处于冒泡阶段（Bubbling Phase）

配合 useCapture 参数观察阶段变化

给元素添加事件监听器时，第三个参数 useCapture 决定了监听器注册在哪个阶段：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

element.addEventListener('click', handler, true) → 在捕获阶段触发
element.addEventListener('click', handler, false) 或省略 → 在冒泡阶段触发

注意：无论 useCapture 是 true 还是 false，eventPhase 都能准确反映事件当前实际所处的阶段。比如在捕获阶段触发的回调里，event.eventPhase 就是 1；即使监听器注册在冒泡阶段，当事件还在捕获途中经过该元素（前提父元素触发了捕获），只要监听器没被调用，就看不到它——但一旦调用，eventPhase 一定是 2 或 3。

实际判断示例

下面是一个简单例子，演示如何在处理函数中识别阶段：

document.addEventListener('click', function(e) {
  switch(e.eventPhase) {
    case 1:
      console.log('捕获阶段');
      break;
    case 2:
      console.log('目标阶段');
      break;
    case 3:
      console.log('冒泡阶段');
      break;
  }
}, true); // 注册在捕获阶段，但 eventPhase 仍会随事件流动态变化

如果点击的是某个子元素，这个监听器会在捕获阶段触发（e.eventPhase === 1）；而如果给那个子元素自身也绑定了点击监听器（不带 true），则在其回调中 e.eventPhase 通常是 2（目标阶段）或 3（冒泡阶段），取决于是否还有更外层的冒泡监听器正在执行。