怎么处理在复杂的事件冒泡与捕获阶段由于闭包变量变化引发的迷失

本质是循环绑定事件时闭包捕获了被反复覆盖的变量，关键在变量生命周期而非事件流；用let创建块级作用域、IIFE封装或事件对象反查data属性均可解决。

这个问题本质是“循环绑定事件时，闭包捕获了被反复覆盖的变量”，不是冒泡或捕获阶段本身出错，而是闭包作用域与变量提升共同导致的逻辑错位。关键不在事件流，而在如何让每个事件处理器记住它该记住的值。

认清问题根源：不是事件流，是变量生命周期

典型错误代码：

for (var i = 0; i < 3; i++) {
  btn[i].addEventListener('click', () => console.log(i));
}

无论点击哪个按钮，都输出 3。原因不是事件冒泡传错了，而是所有回调函数共享同一个 i 变量——它属于函数作用域，循环结束时值为 3，闭包只是忠实地引用了这个最终值。

用块级作用域切断变量共享

ES6 的 let 天然解决此问题：

• let i 在每次循环迭代中创建新绑定，每个回调捕获的是各自独立的 i
• 无需额外封装，语义清晰，兼容现代浏览器（Chrome 49+、Firefox 44+、Safari 10+、Edge 14+）

改写后：

for (let i = 0; i < 3; i++) {
  btn[i].addEventListener('click', () => console.log(i)); // 输出 0、1、2
}

兼容旧环境：立即执行函数包裹（IIFE）

若需支持 IE 或老旧运行时，用 IIFE 显式创建作用域：

for (var i = 0; i < 3; i++) {
  (function(index) {
    btn[index].addEventListener('click', () => console.log(index));
  })(i);
}

原理：每次循环调用匿名函数，参数 index 是独立形参，每个回调闭包捕获的是不同实参值。

更健壮的解法：用事件对象反查数据

避免在绑定时“猜”数据，改由 DOM 元素自身携带上下文：

• 给按钮加 data-index="0" 等属性
• 统一监听父容器，用 e.target.dataset.index 获取点击项编号
• 天然支持动态增删元素，且不依赖闭包记忆

示例：

<p id="list">
  <button data-index="0">A</button>
  <button data-index="1">B</button>
</p>

list.addEventListener('click', e => {
  if (e.target.matches('button')) {
    console.log(e.target.dataset.index); // 安全取值
  }
});

不复杂但容易忽略：闭包变量迷失从来不是事件传播的问题，而是你让函数记住了不该记的东西。选对作用域机制，比在冒泡/捕获里打补丁更治本。