javascript - 删除节点后是否需要将手动将事件解绑？

Question

如果一个单页应用需要大量操作dom节点，并且节点上绑定的事件比较多，需要手动在删除节点的时候解绑吗？删除节点后监听器是否还存在啊？

Answer 1

考量以下演示代码：

let parent = document.body
let child = document.createElement('p')

child.addEventListener('click', clickHandler)
parent.appendChild(child)

当我们移除 child 对象后：

parent.removeChild(child)

此时对于 DOM Tree 来说 child 当然是不存在的了，但是内存中依然有对于它的引用，也就是 child 本身，只不过它没有在 DOM Tree 中而已。因此，clickHandler 也同样驻留在内存中。

当然了移除事件回调也不一定非要用 removeEventListener，像上例那种情况使用最简单的办法可以 child = null 即可。

以上说的是最基本的情况，现实中其实要考虑很多因素。比如你说你做的是一个 SPA，那么假设你用了某种框架吧。现在的 SPA 基本上都会告诉你：

如果你要做 DOM 操作，不要直接写在 Controller（或其他）地方，而是要写在组件（比如 Directive）里

Basically，这么做的原因是框架的组件机制都会维护自身的生命周期，如果你要处理类似本问题中的“善后”工作，你可以利用这些生命周期来实现。框架会保障一些基本的东西，比如说判断 DOM Element 是否还存在于 DOM Tree 中，或者是否还有引用等等（一般来说，组件化有一个很大的好处就是 Isolation，也就是避免到处都是引用，因为人工判断和跟踪会很累很烦很容易出错）。

老的浏览器存在很多 Bug，类似的“善后”工作可能要考虑的更细致和周全一些。

Answer 2

翻了下javascript高级程序设计，大概是这样讲的：

在两种情况下会造成内存中存在过是不用的“空事件处理程序”。

1. 第一种情况是从文档中移除带有事件处理程序的元素时，使用innerHTML替换页面中某一部分的时候，原来添 加到元素中的事件处理程序极有可能无法被当作垃圾回收。尤其是IE浏览器。如果你知道某个元素即将被移除，那么最好手动移除事件处理程序。

2. 第二种情况是页面卸载的时候。

但是只是讲的可能，不知道这段文字的时效性怎样，但是为了保险起见我还是移除吧。

Answer 3

我觉得没有必要，你想想原生的事件是怎么添加的？

mydom.addEventListener("eventName",handler);

事件名和回调函数，明显是由dom自身维护起来的。如果dom被删除，那么key和handler的维护必然也被一起删除，不需要你手动去removeEventListener，这是多此一举。

Answer 4

个人认为还是有必要移除事件的。
1.既然是事件监听，那应该会随时对绑定的元素进行监听，虽然你手动移除了元素，但是程序不知道；

Answer 5

手机上内存非常有限，这是单页应用必须要做的事情