即使删除了绑定的DOM元素后,内存中是否存在JavaScript事件处理程序?

给出以下代码
<div id="app">
  <div id="foo" />
</div>

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

我打算更换#app的内容[例如$(‘#app’)。html(‘…’)或innerHTML =’…’;]。我知道我可以使用jQuery的.remove()调用一个解除绑定事件的“destroy”处理程序。事实上,有一个破坏处理程序设置为删除事件导致我相信,在不解除事件的情况下,当DOM元素被删除时,处理程序将仍然存在于内存中。

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

解决方法

jQuery跟踪事件处理程序本身,这是为什么需要使用unbind(现在是 off)的一部分,如果您从DOM中删除元素不是通过jQuery方法(如果您使用jQuery的空或删除,如您所提到的它在内部处理这个)。这是jQuery知道它可以释放其对处理程序的引用。

如果不是这样,那么在理论上,你不必做任何事情,因为一旦DOM元素从内存中删除,它不再可以访问,所以在理论上不应该将事件处理程序保留在内存中。那就是理论。现实是非常不同的,它可以很容易地结束一个情况(特别是IE),其中DOM元素和事件处理程序都不能被清理,因为它们都导致另外一个问题 – 一个内存泄漏。 JavaScript没有循环引用的问题(只要别的都指向它们,它就可以理解它们并且可以释放两个指向对方的东西),但浏览器的DOM部分可能用不同的语言编写,一个不同的垃圾收集机制(IE使用COM,它使用引用计数而不是可达性)。 jQuery可以帮助你避免IE的这个陷阱(为什么它跟踪事件处理程序的一部分),但是你必须使用unbind(现在关闭)(或通过空,删除等)删除元素)。

带走的消息:当你挂钩的时候,你会脱钩。 :-)(和/或在删除元素时使用jQuery,因为它会处理这个。)

有点相关:如果你添加删除元素很多,你可能会看看事件委托(哪个jQuery通过on的委托签名变得非常简单)可能有所帮助。

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些