javascript - 从 DOM 中移除的元素取消绑定(bind)事件

Question

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

我的同事建议问题是我们在特定元素上绑定(bind)了事件处理程序，例如

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

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

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

我无法反驳他，但我非常肯定，一旦旧元素被移除，事件处理程序也会被浏览器移除。毕竟:他为什么要保留它们？

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

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

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

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

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

Answer 1

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

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