在element.parentNode.removeChild(element)之前是否需要element.removeEventListener()？

Question

假设我的文档中有一系列元素,它们是单个对象的子元素.这些元素中的每一个都注册一个具有不同参数的新事件监听器.如果我丢弃父对象,是否需要手动取消注册所有eventListeners？或者浏览器是否跟踪所有事件侦听器并在从DOM中删除元素时丢弃它们？我问的原因是因为跟踪所有事件非常痛苦,然后调用removeEventListeners.似乎浏览器应该足够聪明才能弄清楚这一点,但如果我不这样做,我恐怕会泄漏内存.

举个例子:

var elements = parent.childNodes;
var listeners = [];
for (var i = 0; i<elements.length; i++) {
   listeners.push(elements[i].addEventListener('click',function() { alert(i); }));
}

然后:

for (var i = 0; i<elements.length; i++) {
   elements[i].removeEventListener(listeners[i]);  // is this really required?
}
parent.parentNode.removeChild(parent);

什么是典型的方法？我意识到一种简单的方法是将事件监听器引用存储在元素本身上,但我想知道修改元素的类型是否会导致额外的性能问题？

Answer 1

在现代浏览器中,在从DOM中删除元素之前,不需要删除事件侦听器.如果你的javascript中没有直接引用该特定DOM元素(例如存储在JS变量中的DOM元素引用),那么删除后将对DOM元素进行垃圾回收.

DOM GC足够聪明,知道一旦事件监听器从DOM中删除,它就不会被计为对该DOM元素的引用(因为DOM事件从DOM中删除时不会发生).