HTML事件本身不导致内存泄漏，但未清理的事件绑定会阻止垃圾回收；常见原因是addEventListener后未调用removeEventListener解绑，尤其匿名函数无法匹配、事件委托长期驻留、闭包意外持有大对象或DOM节点。
HTML 事件本身不会“导致”内存泄漏，但不当的事件绑定 + 未清理的引用会阻止垃圾回收，最终表现为内存持续增长。关键不在“事件不支持”，而在你没主动断开它。
addEventListener 后忘记 removeEventListener
这是最常见原因：给元素绑了事件，但元素被移除或组件卸载时没解绑，回调函数连带其闭包里的变量一直驻留内存。
- 尤其注意动态创建/销毁的 DOM（如单页应用中频繁切换的模块）
- 如果用
addEventListener传入匿名函数，removeEventListener无法匹配——必须用同一个函数引用 - 推荐写法：
const handler = () => { ... }; el.addEventListener('click', handler);，卸载时调用el.removeEventListener('click', handler) - 现代框架（React/Vue）中，生命周期钩子（如
useEffect的 cleanup 函数、onUnmounted）是自然的解绑时机
事件委托绑定在 document 上却永不清理
为性能用事件委托（比如 document.addEventListener('click', handler)），但整个页面生命周期内只绑一次、从不解绑，handler 里又引用了局部变量或 DOM 节点，就会累积泄漏。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 委托事件也要有明确的“作用域结束”信号——比如某个弹窗关闭、某个模块卸载
- 避免全局长期存活的 handler 引用大型对象（如整个 React 组件实例、大数组）
- 可加标记（如
if (!mounted) return）配合状态控制，但不如直接解绑干净
闭包捕获了本不该长期持有的 DOM 或数据
事件回调函数形成闭包，无意中持有了大对象或已移除的 DOM 节点，导致它们无法被 GC。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：在循环中为每个按钮绑定事件，回调里直接用了循环变量
i或item—— 用let声明可解决变量提升问题，但若item是大型对象，仍可能滞留 - 检查回调内部是否访问了外部作用域中的大数组、缓存 Map、未释放的 Canvas Context 等
- 临时方案：在 handler 开头手动清空不需要的引用，如
handler = null（但更推荐结构化解绑）
真正难排查的不是“怎么绑”，而是“谁还在引用它”。Chrome DevTools 的 Memory 面板录制堆快照后，用 “Retainers” 查看某个 DOM 节点为何不被回收，往往能直接定位到哪个 event listener 的闭包卡住了它。
