删除HTML元素时，其本身及子元素绑定的EventListener是否会被清除？

回答 #

这些事件监听器不会在调用removeChild的瞬间被主动删除，但最终会随节点的垃圾回收被一同销毁，具体分两种情况：

• 如果你的代码里没有其他变量持有这些被移除的div节点的引用，那么这些脱离DOM树的节点会被标记为可回收对象，浏览器下次执行垃圾回收时，节点本身和绑定在其上的事件监听器会被一同清除，不会造成内存泄漏。
• 如果你的代码提前保留了这些节点的引用，哪怕节点已经被移出DOM树，只要引用还存在，节点和对应的事件监听器就不会被销毁，你仍然可以手动触发事件得到响应。

你可以用以下代码验证第二种情况：

let div_ids=["0","0:0","0:0:0","0:1"];
// 提前存储子节点的引用
const holdChild = document.getElementById("0:0:0");
for(let i=0;i<div_ids.length;i++){
   document.getElementById(div_ids[i]).addEventListener("click",()=>{console.log("hi");});
}
// 移除根节点
document.body.removeChild(document.getElementById("0"));
// 手动触发持有引用的节点的点击事件
holdChild.click(); 
// 控制台仍然会打印hi，说明此时监听器还未被清除

补充说明：现代主流浏览器（Chrome、Firefox、Safari、Edge等）都已完善了对应的垃圾回收逻辑，只要不故意持有无用DOM节点的引用，不需要手动解绑事件也不会出现内存泄漏。仅部分老旧浏览器（如IE6、IE7）存在该场景下的内存泄漏bug，需要在移除节点前手动解绑事件。

内容的提问来源于stack exchange，提问作者prewky