jQuery - 元素检测的性能

我正在阅读我的同事的代码，我想知道是否可以提高性能。对于任何按钮事件有这样的代码：jQuery - 元素检测的性能

一个）

$("body").on("click", ".aButtonName", function() { ....}); 
$("body").on("click", ".aButtonName", function() { ....}); 
$("body").on("click", ".aButtonName", function() { ....}); 

.... 
$("body").on("click", ".aButtonName", function() { ....});

b）中难道是更快地分析每个目标事件，当点击体后：

$(document.body).on('click', function(e){ 

var trg = $(e.target).closest('button'); 
if(!trg || !trg.attr('class')) 
    return; 


if (trg.attr('class').indexOf('my_button') > -1) { 
    ....

来源

2014-02-23 user2952265

没有....因为在这种情况下，在身体上的选择有任何点击进行评估，而不是....你需要针对最不常见的元素在事件委托的情况下绑定处理程序 –

这会在功能处理更多按钮的情况下提高性能，否则就像事件直接附加到元素一样。 –

使用'$（document.body）'而不是$（“body”）'会稍微改善。更好的是，将body保存为var'var $ body = $（document.body）;'。 – pstenstrm

这很可能会降低性能。在第二种情况下，您最终执行回调函数，传递参数以及执行几个DOM交互以退出。首先，jQuery执行选择器匹配，并且只在匹配时执行该函数。

在这两种风格中，事件都会在“气泡”（传播）到body后处理。这种“委托式”检查选择器是否匹配目标（或父代）。

正如其他人所暗示的那样，缓存$("body")会节省大量DOM查询，并且您可以使用比body更近/更小的代理来获得更好的性能。

来源

2014-02-23 20:34:28

非常感谢，你可以用a）和b）标记你的解释。我对你指的是什么感到困惑，什么是更好的解决方案。 – user2952265

@ user2952265：你无法自己将“第一”和“第二”映射到“a）”和“b）”...？ – CBroe

问题并不清楚。如果您想在每次点击身体时举办活动，只需按照以下代码操作即可。

<body> 
    <ul> 
     ...... 
    </ul> 
    </body>

在js文件

$('body').click(function(event){ 
    $(this).find('ul').addClass('selected'); 

    });

来源

2014-04-14 10:36:11 Varma

jQuery - 元素检测的性能

回答

相关问题