如果DOM元素被删除，它的监听器也从内存中删除？ [英] If a DOM Element is removed, are its listeners also removed from memory?

问题描述

如果DOM元素被删除，它的监听器是否从内存中删除？

解决方案

现代浏览器

纯粹的JavaScript

如果删除的DOM元素是无引用的（没有引用指向它）然后是 - 元素本身由垃圾收集器拾取，以及与之相关的任何事件处理程序/监听器。

  var a = document.createElement（'div'）; 
 var b = document.createElement（'p'）; 
 //添加事件监听器到b etc ... 
 a.appendChild（b）; 
 a.removeChild（b）; 
 b = null; 
 //对'b'的引用不再存在
 //因此，附加到它的元素和任何事件监听器将被删除。 
  

然而;如果存在仍然指向所述元素的引用，则元素及其事件侦听器将保留在内存中。

  var a = document .createElement（ 'DIV'）; 
 var b = document.createElement（'p'）; 
 //添加事件监听器到b etc ... 
 a.appendChild（b）; 
 a.removeChild（b）; 
 //对'b'的引用仍然存在
 //因此，元素和任何关联的事件侦听器仍然保留。 
  

jQuery

假设jQuery中的相关方法（例如 remove（））将以完全相同的方式运行（考虑 remove （）是使用 removeChild（）编写的）。

但是，这不是真的; jQuery库实际上具有一个内部方法（它是无证的，理论上可以随时改变）调用 cleanData（） （这是这个方法的样子），它会自动清除从DOM中删除的与元素相关联的所有数据/事件（这是通过。 remove（） ， empty（）， html（）等）

---

旧版浏览器

旧版浏览器 - 特别是较早版本的IE - 已知由于事件侦听器保留对它们所附加的元素的引用而发生内存泄漏问题。

如果您想更深入地解释用于修复旧版IE版本内存泄漏的原因，模式和解决方案，我完全建议您阅读这篇关于了解和解决Internet Explorer泄漏模式的MSDN文章。

还有一些与此相关的文章：

• < a href =http://javascript.crockford.com/memory/leak.html> JScript内存泄漏


• IE8中的内存泄漏


• JavaScript内存泄漏

自己手动删除听众可能是一个很好的习惯，案例（只有内存对您的应用程序至关重要，而您实际上是针对此类浏览器）。

If a DOM Element is removed, are its listeners removed from memory too?

解决方案

Modern browsers

Plain JavaScript

If a DOM element which is removed is reference-free (no references pointing to it) then yes - the element itself is picked up by the garbage collector as well as any event handlers/listeners associated with it.

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.

However; if there are references that still point to said element, the element and its event listeners are retained in memory.

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

It would be fair to assume that the relevant methods in jQuery (such as remove()) would function in the exact same way (considering remove() was written using removeChild() for example).

However, this isn't true; the jQuery library actually has an internal method (which is undocumented and in theory could be changed at any time) called cleanData() (here is what this method looks like) which automatically cleans up all the data/events associated with an element upon removal from the DOM (be this via. remove(), empty(), html("") etc).

---

Older browsers

Older browsers - specifically older versions of IE - are known to have memory leak issues due to event listeners keeping hold of references to the elements they were attached to.

If you want a more in-depth explanation of the causes, patterns and solutions used to fix legacy IE version memory leaks, I fully recommend you read this MSDN article on Understanding and Solving Internet Explorer Leak Patterns.

A few more articles relevant to this:

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

Manually removing the listeners yourself would probably be a good habit to get into in this case (only if the memory is that vital to your application and you are actually targeting such browsers).

这篇关于如果DOM元素被删除，它的监听器也从内存中删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！