从 DOM 中移除的元素中取消绑定事件

Posted 2023-05-09

【中文标题】从 DOM 中移除的元素中取消绑定事件

【英文标题】：Unbind events from elements that are removed from the DOM

【发布时间】：2014-05-22 15:32:50

【问题描述】：

我正在与一位开发人员讨论我们在 ios 设备上使用网络应用时遇到的问题。它大量使用事件和 jQuery。我们目前存在应用使用一定时间后运行缓慢的问题。

我的同事认为问题在于我们将事件处理程序绑定到特定元素上，例如

$("div#id123").on("click", function(....)....);

而且，因为每当我们将新元素加载到 DOM 时都会这样做，这些事件处理程序最终会“污染”浏览器，使其变慢。

一旦加载了新元素，旧元素就完全来自 DOM 的 $("div#id456").remove()d，直到它们可以再次加载（完全新的，没有任何类型的缓存）。

我不能反驳他，但我很确定一旦旧元素被删除，事件处理程序也会被浏览器删除。毕竟：他为什么要保留它们？

他建议我重写所有处理程序以具有以下形式

$(document).on("click", "div.commonclass", function(....)...);

在文档级别拥有事件处理程序，绑定到我们处理的所有元素共有的类。

这对我来说意味着一些重大的重写，我想避免因为在我看来不是我们问题的根本原因的事情。

我对已移除元素上的事件的假设是否正确，如果正确，我如何向我的同事表明重写事件处理程序会不必要地浪费工作时间？

【问题讨论】：

使用.remove() 也会删除任何绑定的处理程序。按照建议使用委托将避免有许多处理程序，具体取决于多少元素。所以我建议你也试试。现在您的问题可能来自其他地方

使用 .detach() 而不是 remove() 因为 .detach() 充当临时删除但事件处理程序没有删除请尝试

【参考方案1】：

我发现，当您专门为 iOS 应用程序使用 javascript 时，由于内存开销，您在使用 jQuery 时需要非常小心。我经常不得不用原生 javascript 重写 jQuery 大量的 javascript 部分，以减少内存占用并确保它在 iOS 环境中有效工作。我发现在这种情况下进行调试的最佳方法是在 google chrome 中使用分析器。刚刚回答了一个类似的问题，请参阅此处了解更多信息：Is there any possible danger of using "JQuery.on()" profusely

使用 chrome 分析器时，拍摄堆快照，进行更改，然后拍摄另一个堆快照并进行比较。这样可以查看脚本更改对内存的影响。