javascript - 如果移除了一个 DOM 元素，它的监听器是否也会从内存中移除？

Question

如果一个 DOM 元素被移除，它的监听器是否也会从内存中移除？

Answer 1

现代浏览器

纯 JavaScript

如果被移除的 DOM 元素是无引用的(没有指向它的引用)，那么 是 - 元素本身被垃圾收集器以及任何相关的事件处理程序/监听器拾取用它。

var a = document.createElement('div');
var b = document.createElement('p');
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b);
b = null; 
// A reference to 'b' no longer exists 
// Therefore the element and any event listeners attached to it are removed.

但是；如果有仍然指向该元素的引用，则该元素及其事件监听器将保留在内存中。

var a = document.createElement('div');
var b = document.createElement('p'); 
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b); 
// A reference to 'b' still exists 
// Therefore the element and any associated event listeners are still retained.

jQuery

可以公平地假设 jQuery 中的相关方法(例如 remove())将以完全相同的方式运行(考虑到 remove() 被编写使用 removeChild() 例如)。

但是，这不是真的； jQuery 库实际上有一个名为 cleanData() (here is what this method looks like 的内部方法(未记录，理论上可以随时更改) ) 在从 DOM 中删除时自动清除与元素关联的所有数据/事件(通过 remove()、empty()、html ("") 等)。

---

旧版浏览器

旧版浏览器(尤其是旧版 IE)已知会存在内存泄漏问题，因为事件监听器会保留对它们附加到的元素的引用。

如果您想更深入地了解用于修复旧版 IE 版本内存泄漏的原因、模式和解决方案，我完全建议您阅读 this MSDN article on Understanding and Solving Internet Explorer Leak Patterns.

还有几篇与此相关的文章:

• JScript memory leaks
• Memory leaks in IE8
• JavaScript Memory Leaks

在这种情况下，自己手动删除监听器可能是一个好习惯(仅当内存对您的应用程序至关重要并且您实际上是针对此类浏览器时)。