JavaScript事件回调用闭包保存数据，核心是利用函数作用域链在定义时捕获外部变量，使事件触发时仍可访问；常见于循环绑定事件时避免变量共享问题，如IIFE或forEach+箭头函数创建独立副本。
JavaScript 中事件回调用闭包保存数据，核心是利用函数作用域链，在回调函数定义时“捕获”外部变量，让这些变量在事件触发时仍可访问——哪怕外部作用域已执行完毕。
为什么需要闭包保存数据？
常见场景如循环中为多个元素绑定事件，若直接在循环里使用变量（如 i），所有回调会共享同一个变量引用，最终都取到循环结束后的值（比如 i === 5）。闭包能为每次迭代创建独立的数据副本。
典型写法：IIFE（立即执行函数）
在 ES5 环境或需兼容旧浏览器时，常用 IIFE 封装当前轮次的变量：
for (var i = 0; i < 3; i++) {
(function(index) {
document.getElementById('btn' + index).onclick = function() {
console.log('点击了第', index, '个按钮'); // 正确输出 0、1、2
};
})(i);
}
这里 index 是 IIFE 的形参，每次调用都生成新作用域，回调函数形成闭包，记住各自的 index 值。
立即学习“Java免费学习笔记（深入）”；
更简洁的方式：let 声明 + 块级作用域
ES6+ 推荐用 let 替代 var，因为 let 在每次循环迭代中创建新的绑定：
for (let i = 0; i < 3; i++) {
document.getElementById('btn' + i).onclick = function() {
console.log('点击了第', i, '个按钮'); // 同样正确输出 0、1、2
};
}
本质仍是闭包——每个回调函数都闭包了自己迭代块中的 i 绑定，只是语法更干净，无需手动封装。
保存更复杂的数据：传入对象或构造闭包环境
若需保存 DOM 元素、配置项等非原始值，可把数据作为参数传入闭包函数：
- 把元素和相关数据一起传进 IIFE 或箭头函数
- 用 data-* 属性 存储简单标识，回调中读取（适合轻量场景）
- 将数据挂载到 DOM 元素上（如 element.dataset.id = id），回调中通过 this.dataset 或事件对象获取
例如：
const items = [{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}];
items.forEach(item => {
const btn = document.createElement('button');
btn.textContent = item.name;
btn.onclick = () => {
console.log('选中：', item.name, 'ID：', item.id); // item 被闭包捕获
};
document.body.appendChild(btn);
});
这里的 item 是每次 forEach 迭代的局部变量，箭头函数自动形成闭包，安全持有当前项引用。
不复杂但容易忽略：关键不是“怎么写闭包”，而是理解“谁在什么时候被谁记住”。只要回调函数定义时能访问某个变量，且该变量没被垃圾回收，就构成了有效闭包。
