事件监听器未解绑会导致内存泄漏，因移除dom后监听函数仍持有外部变量引用，形成悬空监听器；匿名函数无法解绑；监听器堆积引发性能下降；框架中监听全局对象等场景需手动清理。

事件监听器未解绑会直接导致内存泄漏，核心原因是：DOM 元素被移除后，其绑定的监听函数仍保留在内存中，并持续持有对外部作用域变量的引用，使这些本该被回收的对象无法释放。

监听器让 DOM 和 JS 对象“互相拽着不放手”

当调用 addEventListener 绑定一个函数到某个 DOM 元素时，浏览器内部会建立一条引用链：DOM 元素 → 监听函数 → 闭包捕获的外部变量（如组件实例、大型数据、API 响应结果等）。一旦这个 DOM 元素从页面中被 removeChild 或 innerHTML = '' 移除，但监听器没解绑，它就变成一个“悬空监听器”——既找不到对应 DOM，又无法被垃圾回收器判定为不可达。

尤其在单页应用中反复挂载/卸载组件时，这类监听器会越积越多，每个都拖着一整片作用域数据，堆内存持续上涨。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

匿名函数监听器根本没法清理

使用匿名函数注册监听器，等于主动放弃了解绑能力：

• button.addEventListener('click', () => console.log(this.data));
• 后续无法调用 removeEventListener，因为没有函数引用可传入
• 即使按钮被移除，这个箭头函数及其闭包中的 this.data 仍驻留内存

监听器堆积还会引发性能雪崩

每次事件触发（比如 scroll、resize），浏览器都要遍历当前所有绑定的监听器并逐个调用。如果因未解绑累积了数百个监听器：

• 事件分发变慢，UI 响应卡顿
• V8 引擎需维护更长的引用链，GC 压力增大
• Chrome DevTools 的“事件监听器”面板能直观看到残留监听器数量和来源行号

React/Vue 等框架里也得手动兜底

框架自动清理只覆盖标准生命周期（如组件 unmount），但以下情况仍需开发者干预：

• 监听全局对象（window、document、EventBus）
• 第三方库创建的 DOM 元素（如图表、编辑器容器）
• 使用 useEffect 时忘记返回清理函数：return () => el.removeEventListener(...)