关键在于避免闭包持有外部引用、及时解绑监听器、优先使用事件委托，并利用abortcontroller实现自动清理。需只捕获必要值，用具名函数确保引用一致，通过事件委托减少监听器数量，且委托监听器须随父节点销毁而解绑。
关键在于避免闭包持有外部引用、及时解绑监听器、优先使用事件委托，并确保监听器函数可被垃圾回收器识别为无用对象。
避免闭包意外捕获大对象
监听器函数若通过闭包引用了 DOM 元素、大型数据结构或组件实例，会导致这些对象无法被回收。
- ❌ 错误写法：在监听器中直接使用外部变量（如
const data = largeArray; element.addEventListener('click', () => console.log(data))） - ✅ 正确做法：只捕获必要值，或用弱引用/ID 替代强引用。例如传入 id 而非整个对象：
element.addEventListener('click', () => handleItemClick(item.id)) - 若必须访问复杂状态，考虑将监听器定义为类方法并绑定到实例，但需配合组件卸载时手动清理
显式解绑监听器，且保持引用一致
添加和移除监听器时，传入的函数必须是同一个引用，否则 removeEventListener 无效。
- ❌ 避免匿名函数或箭头函数直接传入：
el.addEventListener('click', () => {...})→ 无法解绑 - ✅ 提前声明函数变量：
const handler = () => {...}; el.addEventListener('click', handler); el.removeEventListener('click', handler) - 对动态创建的元素，可在销毁前遍历调用
removeEventListener；也可借助 WeakMap 存储监听器映射关系，便于按需清理
善用事件委托减少监听器数量
为父容器绑定一个监听器，通过 event.target 判断来源，避免为每个子元素单独绑定。
- 减少监听器总数，降低内存占用和 GC 压力
- 无需为动态增删的子节点反复绑定/解绑（只要父节点存在）
- 注意：委托监听器本身也需在父节点销毁时解绑，否则仍会泄漏
利用 AbortController 实现自动清理（现代推荐）
从 Chrome 80+、Firefox 79+ 开始，addEventListener 支持 signal 选项，可与 AbortController 配合实现一键清理。
- 创建控制器：
const controller = new AbortController() - 绑定时传入：
el.addEventListener('click', handler, { signal: controller.signal }) - 销毁时只需调用：
controller.abort()，所有关联监听器自动移除 - 适合组件生命周期管理（如 React useEffect cleanup、Vue onUnmounted）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
