组件销毁时须安全解绑事件，确保监听器生命周期与组件严格对齐：绑定与解绑必须使用同一函数引用和同一options对象实例；推荐用abortcontroller.signal自动批量清理；委托或全局监听需显式卸载。
组件销毁时安全解绑事件，核心是确保监听器生命周期与组件生命周期严格对齐——绑定在哪儿，就在哪儿清理；谁创建引用，谁负责释放。单页应用中，漏掉这一步，轻则多占几MB内存，重则页面卡顿、崩溃。
必须用同一函数引用配对解绑
removeEventListener 不比对函数内容，只校验内存地址。匿名函数或箭头函数每次都是新对象，无法匹配移除：
- ❌ 错误：两次
() => handleClick()是两个不同函数，removeEventListener失效 - ✅ 正确：声明具名函数或变量，绑定和解绑共用同一个引用
const onClick = () => { /* ... */ };<br>el.addEventListener('click', onClick);<br>// 卸载时<br>el.removeEventListener('click', onClick);
选项对象要复用同一引用，不能“内容相同”就以为够了
带 { capture: true }、{ passive: true } 或自定义配置时，removeEventListener 要求传入的 options 是**同一个对象实例**，不是“长得一样”：
- ❌ 错误：
el.addEventListener('scroll', h, { capture: true });后又写el.removeEventListener('scroll', h, { capture: true });—— 新建对象，不匹配 - ✅ 正确：提前定义常量
const opts = { capture: true };，绑定和解绑都用它
优先用 AbortController.signal 自动管理（现代推荐）
Chrome/Firefox/Safari 15.4+ 支持，一行 controller.abort() 可批量清除所有关联监听器，无需保存 handler 引用，也避免闭包滞留：
- 绑定时：
const controller = new AbortController();<br>el.addEventListener('click', handler, { signal: controller.signal }); - 组件卸载时：
controller.abort();—— 所有该 signal 的监听器立即失效 - 优势明显：适合 React useEffect 清理函数、Vue onBeforeUnmount、Web Component disconnectedCallback 等场景
特别注意委托监听与全局监听的清理时机
绑在 document、window 或滚动容器上的监听器，不会随组件 DOM 消失而自动消失，必须显式处理：
- React：在
useEffect返回的清理函数中调用controller.abort()或removeEventListener - Vue 3：在
onBeforeUnmount中执行清理；Vue 2 对应beforeDestroy - 事件委托（如
document.addEventListener('click', delegate)）同样适用上述规则，不能因“绑在 document”就忽略卸载逻辑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
