正确解绑 JavaScript 事件监听器必须用完全相同的函数引用、事件类型和选项对象调用 removeEventListener，否则无法移除导致内存泄漏；需复用同一函数变量和选项常量，组件卸载前清理，并推荐使用 AbortController.signal 批量销毁。
正确解绑 JavaScript 事件监听器，核心就一条：**必须用完全相同的函数引用、事件类型和选项对象调用 removeEventListener**。否则监听器纹丝不动，长期积累就会导致内存泄漏。
必须复用同一个函数引用
匿名函数或每次新建的箭头函数无法被移除，因为它们是不同对象：
- ❌ 错误写法：两次
function(){}或() =>{}看似一样，实为两个独立函数 - ✅ 正确做法：把处理函数声明为变量或具名函数，绑定和解绑都用它
示例：
const handleClick = () => console.log('ok');<br>btn.addEventListener('click', handleClick);<br>// ……<br>btn.removeEventListener('click', handleClick); // ✅ 成功
选项对象必须严格一致（引用相等）
如果绑定时用了 { capture: true }、{ once: true } 或 { passive: true }，解绑时不能只传“内容相同”的新对象：
立即学习“Java免费学习笔记（深入）”；
- ❌
removeEventListener('scroll', handler, { capture: true })—— 新建对象，不匹配 - ✅ 把选项提前定义为常量，绑定和解绑共用同一对象引用
示例：
const opts = { capture: true };<br>el.addEventListener('scroll', handler, opts);<br>el.removeEventListener('scroll', handler, opts); // ✅ 成功
组件卸载或元素销毁前务必清理
尤其注意绑定在 window、document 或滚动容器上的监听器，它们生命周期远长于局部组件：
- Vue 的
beforeUnmount、React 的useEffect清理函数里调用removeEventListener - 动态创建的 DOM 元素（如弹窗、轮播项），销毁前主动解绑
- 避免监听器闭包中持有大数组、组件实例等重型对象
现代替代方案：用 AbortController signal
Chrome、Firefox、Safari（15.4+）等主流浏览器已支持，一行代码批量清理：
- 创建控制器：
const controller = new AbortController() - 绑定时传入：
el.addEventListener('click', handler, { signal: controller.signal }) - 销毁时调用：
controller.abort()—— 所有绑定该 signal 的监听器自动失效
优势：不用保存 handler 引用，避免闭包滞留；缺点：不兼容 IE 和旧版 Safari，需做降级处理。
