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

Question

我有一个产品列表,我需要#container动态更新innerHTML .

我的问题是,如果我在这个答案中做了类似的事情: Jquery删除元素内的所有事件处理程序

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

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

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

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

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

Answer 1

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

替换内容就足够了.

委派活动作为更好的选择:

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

我通常建议使用deferred on,而不是连接到许多单独的元素,尤其是当您的DOM元素动态加载时.

例如

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

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

• 将委派的处理程序附加到单个不变的祖先元素(document如果没有其他更接近/方便的话,这是几个原因的最佳默认值).请参阅说明了解详情
• 所选事件会冒泡到委派的目标元素
• jQuery选择器仅适用于bubble-chain中的元素
• 事件处理程序仅针对导致事件的匹配元素运行.

这样做的结果是委托处理程序仅在事件时匹配,因此可以处理动态添加/删除的内容.在事件注册时,运行时开销实际上较低(因为它只连接到单个元素),并且事件时的速度差异可以忽略不计(除非您可以每秒单击鼠标50,000次!).

笔记:

• 对于委托事件,您应该尝试将它们附加到单个元素,即元素的祖先,并且不会更改.
• 通常body或者document如果没有别的东西是方便的.
• 使用body的委派事件会导致错误做造型.这可能意味着鼠标事件不会冒泡到正文(如果计算的高度body为0).document更安全,因为它不受造型的影响.
• 也document 始终存在,因此您可以在没有问题的情况下将委派的事件处理程序附加到DOM-ready处理程序之外.