我的问题是,如果我在这个答案中做了类似的事情:
Jquery Remove All Event Handlers Inside Element
$("#container").find("*").off();
所以,我删除了所有孩子的所有事件处理程序,然后我更新了html:
$("#container").html(responseFromAJAX);
这将如何影响性能?我的意思是,这是一个好方法,删除所有旧元素和处理程序,清理内存,或者我需要做更多?
我的应用程序是一个网上商店,所以我的用户将环顾四周,并更新#container可能30-50次/访问.
当DOM元素从DOM中删除时,直接连接到DOM元素的事件处理程序会死亡.替换内容就足够了.
委派活动作为更好的选择:
延迟事件(事件委托)的规则是不同的,因为事件实际上并不连接到单个DOM元素,而是在更高级别(如文档)捕获.然后运行选择器,并针对匹配元素运行事件函数.延迟事件占用较少的内存,但运行速度较慢(很快)(您永远不会注意到鼠标事件的差异),因为元素搜索仅在事件触发时完成.
我通常建议使用deferred,而不是连接到许多单独的元素,尤其是当您的DOM元素动态加载时.
例如
$(document).on('someeventname', 'somejQueryselector', function(e){ // Handle the event here });
具有委托处理程序的事件序列
>将委派的处理程序附加到单个不变的祖先元素(如果没有其他更接近/方便的话,文档是最好的默认值有几个原因).请参阅说明了解详情
>所选事件会冒泡到委派的目标元素
> jQuery选择器仅适用于bubble-chain中的元素
>事件处理程序仅针对导致事件的匹配元素运行.
这样做的结果是委托处理程序仅在事件时匹配,因此可以处理动态添加/删除的内容.事件注册时实际运行时开销较低(因为它只连接到单个元素),事件时的速度差异可以忽略不计(除非你可以每秒点击一次鼠标50,000次!).
笔记:
>对于委派事件,您应该尝试将它们附加到单个元素,即元素的祖先,并且不会更改.>如果没有其他方便的话,后备通常是正文或文件.>对委托事件使用body可能会导致样式设置出错.这可能意味着鼠标事件不会冒泡到正文(如果计算出的身体高度为0).文档更安全,因为它不受样式的影响.>此外,文档始终存在,因此您可以在DOM-ready处理程序之外附加委派的事件处理程序,而不会出现任何问题.