for循环中事件回调读取的i常为最终值，闭包可捕获并固化每次迭代的索引；IIFE是最兼容方案，forEach+let更现代简洁，自定义dataset是备选方案。
直接用 for 循环加 addEventListener 时，事件回调里读到的循环变量（比如 i）往往是最终值，所有元素都共享同一个索引。闭包的作用就是把每次循环时的当前索引“捕获”并固化下来，让每个事件处理器拥有自己独立的一份。
用立即执行函数（IIFE）包裹事件绑定
这是最经典、兼容性最好的方式：在每次循环中，用一个自执行函数把当前的 i 作为参数传入，函数内部形成闭包，保存该次迭代的值。
- 写法示例：
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
(function(index) {
buttons[i].addEventListener('click', function() {
console.log('点击了第', index, '个按钮');
});
})(i);
}
注意：这里必须用 var 声明 i（或不声明），否则用 let 会因块级作用域产生不同行为；而 IIFE 的参数 index 就是每次循环时 i 的快照。
用 let 声明循环变量（ES6+ 推荐）
let 在每次循环迭代中都会创建一个新的绑定，每个循环体都有独立的 i，天然形成闭包效果，代码更简洁。
立即学习“Java免费学习笔记（深入）”；
- 写法示例：
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
console.log('点击了第', i, '个按钮');
});
}
✅ 这不是“巧合”，而是 let 的规范行为——每次迭代都绑定新变量，事件回调引用的是各自迭代中的那个 i，无需额外闭包包装。
用 forEach 配合箭头函数（语义清晰）
把 NodeList 转成数组后用 forEach，回调函数的参数本身就是当前索引，天然隔离，可读性高。
- 写法示例：
const buttons = document.querySelectorAll('button');
Array.from(buttons).forEach((btn, index) => {
btn.addEventListener('click', () => {
console.log('点击了第', index, '个按钮');
});
});
⚠️ 注意：NodeList 本身没有 forEach（旧版浏览器），所以先转成数组；箭头函数不是必须的，普通函数也行，关键是 index 参数由 forEach 提供，作用域独立。
给元素打自定义属性再读取（备选方案）
不依赖闭包，而是把索引存为 DOM 属性，在事件中读取。适合需要动态修改索引或兼容极老环境的场景。
- 写法示例：
const buttons = document.querySelectorAll('button');
buttons.forEach((btn, i) => {
btn.dataset.index = i;
btn.addEventListener('click', function() {
console.log('点击了第', this.dataset.index, '个按钮');
});
});
优点是逻辑直白、调试方便；缺点是多了一次 DOM 属性写入，且需确保 dataset 可用（IE11+ 支持）。
不复杂但容易忽略细节：关键不是“用不用闭包”，而是“变量是否在事件触发时仍指向预期值”。现代写法优先用 let 或 forEach，既安全又易懂。
