AbortController 是实现自动注销 DOM 事件监听器最简洁可靠的方案，闭包仅用于捕获 signal 并注入监听器，调用 controller.abort() 即可一行清除所有绑定监听器且无内存泄漏。
闭包本身不提供自动注销，但结合现代 API（如 AbortController）和合理作用域设计，可以构建出**自带生命周期管理、无需手动清理、且无内存泄漏风险**的 DOM 事件管理器。核心不是“用闭包”，而是“用闭包封装可控的取消能力”。
用 AbortController 实现真正的自动注销
这是目前最简洁、标准、可靠的方案。闭包在这里的作用是捕获 signal 并将其注入监听器，而浏览器原生保证：一旦 abort() 被调用，所有绑定该 signal 的监听器会自动失效，且不会触发回调。
- 创建管理器时初始化
const controller = new AbortController()，并将controller.signal传入addEventListener的options参数 - 监听器函数本身可自由使用闭包捕获所需变量（如状态、配置），只要不意外延长 DOM 节点或大对象的生命周期
- 注销只需调用
controller.abort()—— 一行代码，全部监听器立即停用，无残留引用
按 DOM 节点生命周期自动绑定/解绑
不依赖外部手动调用注销，而是让事件管理器感知节点是否还“活着”。适用于动态插入、替换、销毁频繁的场景（如列表渲染、模态框切换）。
- 监听器内部通过
this或event.currentTarget访问目标节点，避免闭包长期持有节点引用 - 配合
MutationObserver监听父容器变化，当检测到目标节点被移除时，自动调用其关联的abort() - 或者更轻量：在监听器回调开头加判断
if (!element.isConnected) return，快速退出，避免无效执行
避免闭包隐式捕获导致的泄漏
高性能的前提是不拖慢 GC。闭包若捕获了不该持有的东西，再“自动注销”也救不了内存。
- 不直接在监听器里读取
this.state、window.config等长生命周期对象；改用参数传入必要字段，或用useRef（React）/WeakRef（通用）存快照 - 避免在事件回调中构造大数组、深克隆对象；高频事件下尤其要节制
- 如果必须缓存计算结果，优先用
Map或WeakMap，键为 DOM 节点本身，确保节点被 GC 后缓存自动失效
一个极简但完整的实现示例
以下是一个基于 AbortController 的轻量级管理器，支持链式调用和自动清理：
function createEventManager(element) {
const controller = new AbortController();
return {
on(type, handler, options = {}) {
element.addEventListener(type, handler, { ...options, signal: controller.signal });
return this; // 支持链式
},
destroy() {
controller.abort(); // 一行完成所有监听器注销
return this;
}
};
}
// 使用：
const btn = document.querySelector('#my-btn');
const em = createEventManager(btn);
em.on('click', () => console.log('clicked'))
.on('mouseenter', e => console.log('hover', e.clientX));
// 组件卸载或节点移除前调用：
btn.remove(); // DOM 移除
em.destroy(); // 清理监听器引用
</script>
