即使删除了与之绑定的DOM元素，JavaScript事件处理程序是否仍存在于内存中? [英] Does a javascript event handler exist in memory even after the DOM element to which it is bound is removed?

问题描述

给出以下代码

<div id="app">
  <div id="foo" />
</div>

<script>
  $('#foo').bind('click', function(){});
</script>

我打算替换#app的内容[例如$('#app').html('...');或innerHTML = '...';].我知道我可以使用jQuery的.remove()来调用'destroy'处理程序以解除绑定事件.我设置了destroy处理程序来删除事件，这一事实使我相信，在不解除绑定事件的情况下，当删除DOM元素时，该处理程序仍将存在于内存中.

I plan on replacing the contents of #app [e.g. $('#app').html('...');, or innerHTML = '...';]. I know that I can use jQuery's .remove() which calls a 'destroy' handler that unbinds events. The fact that there is a destroy handler set up to remove events leads me to believe that without unbinding the events, when the DOM element is removed, the handler will still exist in memory.

因此，如果DOM元素#foo不再存在，处理程序是否也会消失，还是会丢失在浏览器的内存中?

So, if the DOM element #foo no longer exists, does the handler disappear as well, or does it get lost in browser memory?

推荐答案

jQuery会跟踪事件处理程序本身，这就是为什么您需要使用unbind 的部分原因(如今它是

jQuery keeps track of event handlers itself, which is part of why you need to use unbind (nowadays it's off) if you're removing the element from the DOM not through a jQuery method (if you use jQuery's empty or remove, as you mentioned it handles this itself inernally). This is so jQuery knows it can release its reference to the handler.

如果不是那样的话，那么理论上，您就不需要做任何事情，因为一旦DOM元素从内存中删除，它就不再可以访问，因此从理论上讲，不要将事件处理程序保留在内存中.那是理论.现实情况截然不同，很容易遇到这样的情况(尤其是在IE上)，其中DOM元素 nor 都无法清除，因为它们各自导致另一个坚持内存泄漏. JavaScript的循环引用没有问题(它理解它们，并且只要没有 else 指向它们，就可以释放两个指向彼此的东西)，但是浏览器的DOM部分可能会用不同的语言和不同的垃圾回收机制编写(IE使用COM，COM使用引用计数而不是可达性). jQuery可帮助您避免IE的这种陷阱(这是跟踪事件处理程序的原因之一)，但是您必须使用unbind (现今为off)(或通过empty删除元素， remove等).

If it weren't for that, then in theory, you wouldn't have to do anything because once the DOM element is removed from memory, it's no longer reachable, and so in theory shouldn't keep the event handler in memory. That's the theory. The reality is very different, it can be very easy to end up with a situation (particularly on IE) where neither the DOM element nor the event handler can get cleaned up because they're each causing the other to stick around — a memory leak. JavaScript has no issue with circular references (it understands them and can release two things that are pointing to each other as long as nothing else is pointing to them), but the DOM part of the browser is likely to be written in a different language with a different garbage collection mechanism (IE uses COM, which uses reference counting rather than reachability). jQuery helps you avoid this pitfall with IE (part of why it keeps track of event handlers), but you have to use unbind (nowadays off) (or remove elements via empty, remove, etc.) as a consequence.

摘录信息:当您上钩时，也应将其摘下. :-)(和/或在删除元素时使用jQuery，因为它将处理此问题.)

The take away message: As you hook, so shall you unhook. :-) (And/or use jQuery when removing elements, since it will handle this.)

有些相关:如果您要添加和删除大量元素，则可能要查看事件委托(通过jQuery的

Somewhat related: If you're adding and removing elements a lot, you might look to see if event delegation (which jQuery makes really easy via the delegation signatures for on) might help.

这篇关于即使删除了与之绑定的DOM元素，JavaScript事件处理程序是否仍存在于内存中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！