jQuery使用事件处理程序删除元素

Question

我有一个产品列表，我需要动态更新#container的innerHTML。

我的问题是，如果我在这个答案中做了类似的事情： Jquery Remove All Event Handlers Inside Element

$("#container").find("*").off();

所以，我删除了所有孩子的所有事件处理程序，然后我更新了html：

$("#container").html(responseFromAJAX);

这将如何影响性能？我的意思是，这是一个好方法，删除所有旧元素和处理程序，清理内存，还是需要做更多？

我的应用是一个网上商店，所以我的用户会环顾四周，并更新#container可能30-50次/访问。

Answer 1

直接连接到DOM元素的事件处理程序在从DOM中删除DOM元素时会死亡。

更换内容就足够了。

委托事件作为更好的选择：

延迟事件（事件委托）的规则是不同的，因为事件实际上并不连接到单个DOM元素，而是在更高级别捕获（如document）。然后运行选择器，并针对匹配元素运行事件函数。延迟事件占用较少的内存，但运行速度较慢（很快）（您永远不会注意到鼠标事件的差异），因为元素搜索仅在事件触发时完成。

我通常建议使用延迟on，而不是连接到许多单独的元素，尤其是在动态加载DOM元素时。

e.g。

$(document).on('someeventname', 'somejQueryselector', function(e){
    // Handle the event here
});

具有委托处理程序的事件序列

• 将委派的处理程序附加到单个不变的祖先元素（document是最好的默认值，有几个原因，如果没有其他更接近/方便）。有关详细信息，请参阅说明。
• 所选事件会冒泡到委派的目标元素
• jQuery选择器仅应用于bubble-chain
中的元素
• 事件处理程序仅针对导致事件的匹配元素运行。

这样做的结果是委派的处理程序仅在事件时匹配，因此可以处理动态添加/删除的内容。事件注册时实际运行时间开销较低（因为它只连接到单个元素），事件时间的速度差异可以忽略不计（除非你可以每秒点击一次鼠标50,000次！）。 / p>

说明：

• 使用委派事件，您应该尝试将它们附加到单个元素，即目标元素的祖先和不会更改。
• 如果没有其他方便的话，后备通常是body或document。
• 将body用于委派事件可能会导致样式设置出错。这可能意味着鼠标事件不会冒泡到正文（如果body的计算高度为0）。 document更安全，因为它不受样式的影响。
• 同时document 始终存在，因此您可以在没有问题的情况下将委派的事件处理程序附加到DOM就绪处理程序之外。

Answer 2

你可以像许多其他jQuery方法一样使用html()，它可以清理事件处理程序和相关数据（当从DOM中删除元素时，不会自动清除btw）。

$("#container").html(responseFromAJAX);

来自文档：

  

当.html（）用于设置元素的内容时，任何内容都是   在该元素中完全被新内容所取代。   此外，jQuery删除了其他构造，如数据和事件   在使用。替换这些元素之前，来自子元素的处理程序   新内容。