我应该在 removeChild 之前从元素中删除事件处理程序吗？

Posted 2023-02-25

【中文标题】我应该在 removeChild 之前从元素中删除事件处理程序吗？

【英文标题】：Should I remove event handlers from element before removeChild?

【发布时间】：2012-12-11 23:59:36

【问题描述】：

说，我有一个元素 <img id="foo" /> 并附加了一些事件，例如 click（不是内联 onclick！）。

// somewhere i wrote
foo.addEventListener("click", clickHandler, false);
...
// somewhere i will write
foo.parentNode.removeChild(foo);

我也需要删除所有事件吗？

【问题讨论】：

If a DOM Element is removed, are its listeners also removed from memory?的可能重复

【参考方案1】：

从 DOM 中移除元素不会（或不应该）移除它的任何监听器；毕竟，您很可能只是在重新排列您的 DOM 元素，因此您不想丢弃任何侦听器。

您可以在之前或之后删除侦听器，这应该没有任何区别。

如果您的计划是删除元素并且不再使用它们，那么继续删除事件以避免任何内存泄漏的可能性是明智的。

【讨论】：

DOM doesn't (or shouldn't) remove any of its listeners。我觉得对我来说足够了。谢谢！

@qeremy 你有什么问题？

内存泄漏怎么办？当节点明显被丢弃时，是否解绑事件有关系吗？

从这个答案中并不完全清楚是否需要删除事件处理程序。也许它们在不再被任何变量引用后被浏览器隐式删除？

@RobW 如果我要取消引用，我可能会在这样做之前删除任何绑定的侦听器。我目前没有任何数据或引用来支持这一点 - 我只是一个偏执的开发人员，他花了 10 多年的时间与这些浏览器争论。

【参考方案2】：

documentation on jQuery's empty() method 说：

为避免内存泄漏，jQuery 移除 其他结构，如数据和 来自子元素的事件处理程序 在移除元素之前 自己。

所以：1) 如果我们没有显式删除事件处理程序，我们会得到内存泄漏，并且 2) 通过使用 empty()，我们可以避免这种内存泄漏。

另见do-events-handlers-on-a-dom-node-get-deleted-with-the-node