dom 删除后，浏览器会自动把绑定的事件销毁吗

Question

假设列表中li分别绑定了事件：
<ul>
<li></li>
<li></li>
…
</ul>

现在我想删除所有li，并把其绑定的事件销毁了，通过如下方法能否实现呢，现代浏览器是怎么处理的？

1、遍历，通过remove()方法依次删除li
2、通过remove()删除外层ul
3、ul.innerHTML = ‘’

Answer 1

你可以做一个测试，F12打开Performance Monitor，查看DOM和EventListener的增长以及销毁情况。

在我们的实际应用场景中，已经多次遇到想当然的以为清除了DOM后，内存就会被释放，但事实并非如此。

一般来说，如果DOM上绑定有事件，那么我们在DOM节点销毁的时候也一定是需要手动解绑事件的。因为DOM节点即使清除，是否在内存中还有残留，需要看F12中Menmory中是否有detached dom，也就是压根没有清除干净。

如果你是使用jquery添加的事件，可以按照下面的流程

$('ul li').off('click mousemve');
$('ul').remove();

原生通过addEventListener添加的事件监听，如今有一种更方便的方式直接清除，就是使用Abort接口。

以下代码来自于StackOverflow

When to use AbortController to remove event listeners?

const buttons = document.getElementsByClassName('button');
const removeListenerBtn = document.getElementById('remove-btn');

const controller = new AbortController;

for(let element of buttons) {
    element.addEventListener('click', (event) =>{
        console.log(event.target.name, "clicked")
    }, { signal: controller.signal })
}

removeListenerBtn.addEventListener("click", ()=> {
    controller.abort()
})

Answer 2

1. 我印象里不会。因为你把节点从 DOM 上移除，它们仍然存在，你还可以把它们添加到别的节点上去，所以按理说此时不该移除事件侦听器。
2. 没必要这么麻烦，直接 ul.innerHTML = ''; ul.remove() 就行。
3. 事件尽量绑定在上层元素，可以减少操作成本。

Answer 3

不会 建议通过事件委托方式绑定在ul 身上。