JavaScript中删除DOM节点不会自动移除事件监听器，易致内存泄漏；应遵循“谁添加谁移除”原则，用相同函数引用和选项调用removeEventListener；推荐事件委托、WeakMap或AbortController优化管理。
在 JavaScript 中，使用 remove() 或 removeChild() 删除 DOM 节点时，不会自动移除该节点上绑定的事件监听器。如果事件监听器引用了外部变量、闭包或大型对象，就可能导致内存泄漏——尤其在单页应用（SPA）中频繁增删节点时更需警惕。
手动移除事件监听器是最可靠的方式
核心原则：谁添加，谁移除。只要用 addEventListener() 绑定过事件，就必须在节点被移除前，用 removeEventListener() 显式解绑。
- 确保传入的监听函数是同一个引用（不能用匿名函数）
- 推荐将监听器定义为具名函数或保存在变量中
- 如果用了选项（如
{ once: true }或{ capture: true }），解绑时必须传相同选项
示例：
const btn = document.getElementById('myBtn');
function handleClick() {
console.log('clicked');
}
btn.addEventListener('click', handleClick);
// ✅ 正确：移除前调用 removeEventListener
function removeButton() {
btn.removeEventListener('click', handleClick);
btn.remove();
}
使用事件委托避免为每个节点单独绑定
当存在大量动态子节点（如列表项），不要给每个子元素单独绑定事件，而是把监听器绑定在稳定父容器上，通过事件冒泡 + e.target 判断来源。
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 父节点长期存在，只需绑定/解绑一次
- 子节点增删不影响事件管理，天然规避泄漏风险
- 适合表格、菜单、消息列表等场景
示例：
const list = document.getElementById('itemList');
list.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-btn')) {
e.target.closest('li').remove(); // 直接删，无需解绑
}
});
利用 WeakMap 管理监听器引用（进阶）
若必须为每个动态节点绑定独立逻辑（如不同参数的回调），又不想手动维护解绑列表，可用 WeakMap 关联节点与监听器，便于统一清理。
-
WeakMap的键是节点引用，节点被 GC 时自动失效，不阻止回收 - 可在节点移除前遍历 WeakMap 查找并解绑
- 适合组件化开发中封装“带事件的可销毁节点”
现代方案：使用 AbortController（推荐用于 fetch / Promise 场景）
虽然不直接用于 DOM 事件，但对基于 addEventListener 的可取消操作（如 abort 事件、fetch 中止），AbortController 是更优雅的生命周期控制方式。
- 在节点销毁时调用
controller.abort() - 监听器内检查
signal.aborted提前退出 - 适用于异步操作与 DOM 生命周期强关联的场景
