当添加原生事件不移除时，为什么会出现内存泄露？

核心原因：事件监听器持有 DOM 元素的引用，导致 DOM 元素被移除后无法被 GC 回收。

具体链路：

1. button.addEventListener('click', handler) 时，浏览器内部建立了 DOM元素 → handler 的引用关系
2. 你用 button.remove() 从 DOM 树移除按钮，但事件系统仍然保留着 handler 对 button 的引用
3. 如果 handler 又是闭包，引用着外层变量 → 整个闭包链上的变量都无法 GC
4. 多次重复后，内存中堆满了"已从 DOM 移出但无法回收的元素和函数"，这就是内存泄漏

解决办法：移除 DOM 元素前调用 removeEventListener。

javascript
button.removeEventListener('click', handler);
button.remove();

或者在不需要关心个别元素时，用事件委托——把事件绑在父元素上。

追问

现代浏览器还会因为不移除事件导致泄漏吗？

IE 时代这个问题最严重（IE 的 JS 引擎和 DOM 使用不同的 GC，循环引用是死穴）。现代浏览器的标记清除 GC 大部分循环引用能处理，但事件监听器 + 闭包的组合仍然会让本应被回收的对象变成"可达"——技术上不是传统意义的泄漏，但效果一样：内存释放不了。

事件委托能解决这个问题吗？

能。事件委托只绑一个监听器在父元素上，子元素增删都不需要管理事件。而且性能更好（减少监听器数量）。唯一注意：focus、blur、mouseenter、mouseleave 这些不冒泡的事件不能用委托。

怎么在 DevTools 中排查内存泄漏？

Performance 面板录一段操作，看 JS Heap 是否持续上升不回落 → Memory 面板取 Heap Snapshot，对比操作前后，看 Detached DOM 节点数量和 @ 引用关系。