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

Question

假设我的文档中有一组元素，它们是单个对象的子元素。这些元素中的每一个都使用不同的参数注册一个新的事件监听器。如果我丢弃父对象，是否需要手动取消注册所有 eventListener？或者浏览器是否跟踪所有事件监听器并在我从 DOM 中删除元素时丢弃它们？我问的原因是因为跟踪所有事件然后调用 removeEventListener 非常痛苦。看起来浏览器应该足够聪明，可以解决这个问题，但如果不这样做，我恐怕会泄漏内存。

举个例子:

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 事件不会发生)。