本质是循环绑定事件时闭包捕获了被反复覆盖的变量，关键在变量生命周期而非事件流；用let创建块级作用域、iife封装或事件对象反查data属性均可解决。
这个问题本质是“循环绑定事件时，闭包捕获了被反复覆盖的变量”，不是冒泡或捕获阶段本身出错，而是闭包作用域与变量提升共同导致的逻辑错位。关键不在事件流，而在如何让每个事件处理器记住它该记住的值。
认清问题根源：不是事件流，是变量生命周期
典型错误代码：
for (var i = 0; i console.log(i)); }
无论点击哪个按钮，都输出 3。原因不是事件冒泡传错了，而是所有回调函数共享同一个 i 变量——它属于函数作用域，循环结束时值为 3，闭包只是忠实地引用了这个最终值。
用块级作用域切断变量共享
ES6 的 let 天然解决此问题：
-
let i在每次循环迭代中创建新绑定，每个回调捕获的是各自独立的i - 无需额外封装，语义清晰，兼容现代浏览器（Chrome 49+、Firefox 44+、Safari 10+、Edge 14+）
改写后：
for (let i = 0; i console.log(i)); // 输出 0、1、2 }
兼容旧环境：立即执行函数包裹（IIFE）
若需支持 IE 或老旧运行时，用 IIFE 显式创建作用域：
for (var i = 0; i console.log(index)); })(i); }
原理：每次循环调用匿名函数，参数 index 是独立形参，每个回调闭包捕获的是不同实参值。
更健壮的解法：用事件对象反查数据
避免在绑定时“猜”数据，改由 DOM 元素自身携带上下文：
- 给按钮加
data-index="0"等属性 - 统一监听父容器，用
e.target.dataset.index获取点击项编号 - 天然支持动态增删元素，且不依赖闭包记忆
示例：
<div id="list">
<button data-index="0">A</button>
<button data-index="1">B</button>
</div>
list.addEventListener('click', e => {
if (e.target.matches('button')) {
console.log(e.target.dataset.index); // 安全取值
}
});
不复杂但容易忽略：闭包变量迷失从来不是事件传播的问题，而是你让函数记住了不该记的东西。选对作用域机制，比在冒泡/捕获里打补丁更治本。
