闭包在事件委托中通过捕获父级作用域变量实现状态持久化，解决循环绑定索引错乱问题，支持动态数据绑定与内存优化，并可封装为复用委托工具。
闭包在事件委托中保存父级作用域状态，核心在于：事件处理器函数被定义在父级作用域内，内部访问的变量被“捕获”并长期持有，即使父级执行上下文已退出，这些变量仍保留在内存中供后续事件触发时使用。
闭包如何绑定循环中的索引或数据
常见问题是在 for 循环中为多个元素绑定事件，却总是读到最后一个值。这是因为所有回调共享同一个 i 变量。闭包通过将当前值“快照”进函数作用域来解决：
- 用 立即执行函数（IIFE） 把当前 i 作为参数传入，形成独立作用域：
for (var i = 0; i (function(index) {
buttons[index].addEventListener('click', function() {
console.log('点击第', index + 1, '个按钮');
});
})(i);
} - 更现代的方式是用 let 声明替代 var，因为 let 在每次循环迭代中创建新绑定：
for (let i = 0; i buttons[i].addEventListener('click', () => console.log('第', i + 1, '个'));
}
事件委托中闭包保留动态数据
在 ul 上监听 click，根据 target 判断具体 li，但需在回调中访问对应 li 的原始数据（如 id、配置项）。闭包让每个 handler 持有它关心的那一份数据：
- 预先遍历 li，把数据存入闭包：
const list = document.querySelector('ul');
Array.from(list.children).forEach((li, index) => {
const data = { id: li.dataset.id, type: li.dataset.type };
li.addEventListener('click', function() {
console.log('点击了', data.id, '类型为', data.type);
});
}); - 若用委托，可在事件监听前构建映射关系，再在 handler 中通过 target 查找闭包持有的数据对象，避免重复查找或 DOM 查询开销。
避免闭包导致的内存泄漏
闭包长期持有父级变量，若引用了大型 DOM 节点、全局对象或未清理的定时器，可能造成内存无法释放：
立即学习“Java免费学习笔记（深入）”；
- 只捕获真正需要的值（如字符串、数字、小对象），避免直接闭包引用整个 DOM 元素或 this；
- 事件处理完成后，手动清除对大对象的引用（尤其在单页应用中动态增删节点时）；
- 使用弱引用结构（如 WeakMap）关联数据与元素，让垃圾回收器能正常工作。
实际委托场景下的闭包封装
封装一个可复用的委托工具，内部用闭包维护 selector 与 handler 的绑定关系和上下文数据：
- 构造函数接收容器、选择器和 handler，把 handler 和 selector 封装进闭包；
- 在事件回调中，通过 matches() 判断 target 是否匹配，并调用 handler，此时 handler 仍能访问初始化时传入的 context 或 options；
- 例如：
function delegate(parent, selector, handler, context) {
parent.addEventListener('click', function(e) {
if (e.target.matches(selector)) {
handler.call(context, e, e.target);
}
});
}
delegate(document.body, '.item', function(e, el) {
console.log(this.apiEndpoint); // this 来自传入的 context
}, { apiEndpoint: '/api/items' });
