将事件监听器移至DOM树高层时，应使用捕获型吗？捕获时stopPropagation效果如何？

一、高层节点事件委托：捕获型 vs 非捕获型（冒泡型） #

在事件委托场景下，两种类型的监听器都能实现目标效果，核心差异在于触发时机：

• 捕获型监听器在事件从根节点向下传播到目标节点的阶段触发
• 非捕获（冒泡）型监听器在事件从目标节点向上冒泡到根节点的阶段触发

如果子元素没有任何事件监听器，两种方式的实际表现几乎一致；若子元素存在其他监听器：

• 捕获型可在子元素的冒泡监听器触发前先处理事件
• 冒泡型会在子元素的所有冒泡监听器触发后再处理

从常规实践和开发者直觉来看，冒泡型（默认false参数）更常用，事件委托的核心逻辑就是利用冒泡特性，代码理解成本更低。

二、stopPropagation()在捕获阶段的行为 #

当在捕获型监听器中调用evt.stopPropagation()时，浏览器会立即终止整个事件流的遍历——既不会继续执行剩余的捕获阶段监听器，也不会进入目标阶段和冒泡阶段。

你的测试结果已经验证了这一点：点击level_3时，level_1的捕获监听器触发并调用stopPropagation()后，level_2的捕获监听器和level_3的冒泡监听器均未触发，说明浏览器完全停止了后续的事件遍历，而非仅仅跳过监听器调用。

三、不同场景下的效率对比 #

1. 仅高层节点设捕获型 vs 冒泡型 #

当只有高层节点（如level_1）有监听器时，两种类型的效率几乎无差异。浏览器的事件流遍历会走完整个路径，但由于没有其他监听器，额外的遍历开销可忽略不计，无需为这点微乎其微的性能差特意选择捕获型。

2. 高层捕获型 vs 目标节点冒泡型+阻止传播 #

这种场景下，目标节点设冒泡型并阻止传播的效率略高，但同样属于可忽略的量级。原因是目标节点的监听器直接在事件到达时触发，无需完成完整的捕获+冒泡遍历。不过这种对比没有实际意义——因为目标节点设监听器会增加页面监听器总数，违背事件委托减少内存占用、简化管理的初衷。

测试代码验证 #

以下是你提供的测试代码，可直接运行验证上述结论：

HTML #

<div class="level_1">
  <div class="level_2">
    <div class="level_3">
    </div>
  </div>
</div>

CSS #

* {
    box-sizing: border-box;
  }

  div[class^='level_'] {
   border: 0.1px solid black;
   padding: 50px;
   width: 100%;
   height: 100%;
  }

  div.level_1 {
    width: 500px;
    height: 300px;
  }

JavaScript #

"use strict";
var l = document.querySelectorAll('div[class^="level_"]');

l[0].addEventListener('mousedown', func_1, true);
l[1].addEventListener('mousedown', func_2, true);
l[2].addEventListener('mousedown', func_3, false);

function func_1 (evt) {
  evt.stopPropagation();
  console.log('level 1');
  console.log(evt.target);
  console.log(evt.currentTarget);
}

function func_2 (evt) {
  console.log('level 2');
  console.log(evt.target);
  console.log(evt.currentTarget);
}

function func_3 (evt) {
  console.log('level 3');
  console.log(evt.target);
  console.log(evt.currentTarget);
}

内容的提问来源于stack exchange，提问作者Gary