未移除事件监听器会导致内存泄漏、响应雪崩和性能下降；匿名函数使removeEventListener失效；应使用具名函数、成对绑定/移除、AbortController或once选项主动防控。
因为事件监听器长期滞留会持续占用内存、响应无效触发、拖慢页面重绘，而 removeEventListener 缺失本身不报错，却让问题在用户端静默积累——它不像语法错误立刻中断执行，而是像后台悄悄运行的冗余进程，直到内存告急、交互卡顿、CPU 占用飙升才暴露出来。
监听器“挂而不卸”直接引发内存泄漏
每次调用 addEventListener，浏览器都会在目标元素（如 window、document 或某个 DOM 节点）上注册一个监听器对象，并持有一个对回调函数的强引用。如果忘记调用 removeEventListener，这个引用就一直存在，导致：
- 回调函数及其闭包中访问的所有变量无法被垃圾回收
- 监听器本身持续驻留在事件系统内部链表中，随页面生命周期无限累积
- 在单页应用（SPA）中反复进入/退出同一模块时，监听器成倍叠加（例如每次
mounted都加一次resize，但unmounted从不清理）
重复绑定 + 零移除 = 事件响应雪崩
一个典型场景：用户频繁切换标签页或路由，组件反复创建销毁。若每次都在 window 上绑定 scroll 或 keydown 监听器，却不移除，后果是：
- 一次滚动触发数十个重复回调，CPU 瞬间拉高
- 每个回调都执行 DOM 查询、计算、重排（reflow），页面明显卡顿
- 用户感知为“越用越慢”，但开发者很难定位——因为控制台无报错，性能面板只显示“大量 JS 执行”，不提示根源是未清理的监听器
匿名函数让移除逻辑彻底失效
这是最隐蔽也最普遍的陷阱。只要用了箭头函数或内联 function(){}，removeEventListener 就注定失败：
立即学习“前端免费学习笔记（深入）”；
- 添加时：
window.addEventListener('resize', () => doLayout())→ 创建新函数实例 A - 移除时：
window.removeEventListener('resize', () => doLayout())→ 创建新函数实例 B（与 A 不等）→ 匹配失败，监听器仍在 - 结果：你以为“已卸载”，实际监听器还在后台默默运行，且每次重新绑定又新增一个
正确解法：从设计源头切断泄漏路径
不是等出问题再排查，而是让“可移除”成为默认习惯：
- 所有事件监听必须使用具名函数或组件方法（如 Vue 的
methods.handleResize），确保引用可复用 - 绑定与移除必须成对出现在同一作用域，推荐封装为
useEventListener自定义 Hook（React）或onMounted/onBeforeUnmount（Vue）生命周期内闭环管理 - 对全局事件（如
window）优先使用{ once: true }选项，或配合AbortController实现自动清理：const controller = new AbortController(); element.addEventListener('click', handler, { signal: controller.signal }); // 后续 controller.abort() 即自动移除所有关联监听器
