当前位置 : 主页 > 网络安全 > 测试自动化 >

性能 – 使用事件处理程序删除元素的jQuery

来源:互联网 收集:自由互联 发布时间:2021-06-22
我有一个产品列表,我需要动态更新#container的inner HTML. 我的问题是,如果我在这个答案中做了类似的事情: Jquery Remove All Event Handlers Inside Element $("#container").find("*").off(); 所以,我删除了所
我有一个产品列表,我需要动态更新#container的inner HTML.

我的问题是,如果我在这个答案中做了类似的事情:
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处理程序之外附加委派的事件处理程序,而不会出现任何问题.

网友评论