如果我将JavaScript事件绑定到一个元素,然后删除该元素,该事件会发生什么？

Question

假设我有一个元素:

<section id="container">
    <div id="curious">hey, there</div>
</section>

然后,在DOM加载之后,我将一个事件绑定到元素,如下所示:

$('#curious').click(function (){
  alert('Are you curious?');
});

稍后,该元素将被删除:

$('#container').html('');

绑定事件会发生什么？它也被删除了吗？它徘徊吗？清理它是一个好习惯吗？

Answer 1

根据该.html()方法的jQuery文档,删除了事件处理程序.

这样做是为了防止内存泄漏.

当.html()用于设置元素的内容时,该元素中的任何内容都将被新内容完全替换.此外,在使用新内容替换这些元素之前,jQuery 会从子元素中删除其他构造(如数据和事件处理程序).

同样,使用.empty()/ .remove()方法同样适用:

将删除与元素关联的所有绑定事件和jQuery数据.

如果要保留数据和事件侦听器,请改用该.detach()方法.该.detach()方法与该方法基本相同,.remove()只是它保留了所有jQuery数据与删除的元素相关联(这意味着您可以在分离后附加相同的元素,并且事件仍然会被绑定).