Javascript 性能 - 已删除节点上的事件答案

【问题标题】：Javascript performance - Events on removed nodesJavascript 性能 - 已删除节点上的事件
【发布时间】：2016-01-24 14:29:05
【问题描述】：

我的问题很简单：我们是否必须从我们从 DOM 中动态删除的元素中删除 Javascript 事件侦听器？

让我们以使用 jQuery 的 (fiddle with full code) 为例：我们有一个使用 jQuery html 函数更改 DOM 内容的用户操作：

$('wrapper').html(markup);

标记变量有很多 eventDiv 类的元素，我们在这些元素上添加了一些事件监听器：

 $(".eventDiv").mouseenter(function() {
    $(this).css('background-color', 'red');
});
$(".eventDiv").mouseleave(function() {
    $(this).css('background-color', 'white');
});

这种更改 html 内容的方式会导致内存泄漏吗？我们是否必须取消绑定所有事件侦听器？还是从 DOM 中移除节点就足够了？

其次，有一种简单的方法可以删除容器 div 的子元素上的所有侦听器吗？就我而言，类似

$('wrapper').unbindAllChildEventsListeners();

PS：这是一个例子，真实案例场景在用户操作加载的新标记上有很多不同的事件，还有一个更加清晰的 DOM 树，“标记”变量来自一个dustjs模板。

【问题讨论】：

这里您使用 jQuery 绑定事件。在您的情况下，您不必取消绑定任何事件，jQuery 会处理它，并且无论如何使用 vanilla js 相关方法（不使用任何引用对象）在这里都是一样的。也就是说，在您的情况下，您最好将事件委托给静态 #wrapper 元素，这只会绑定一个处理所有子 .eventDiv 元素的事件处理程序。

标签： javascript jquery memory-leaks jquery-events

【解决方案1】：

考虑这个例子：

http://jsbin.com/bunoyedabo/edit?html,js,console,output

首先，使用事件委托。 $().on('eventName', 'targetSelector', cb); 其次，您可以使用 .off() 或 .unbind() 取消绑定事件。

【讨论】：