jQuery中的绑定事件非常昂贵，还是非常便宜？

Question

我刚刚写了一个$（）。bind（'event'）函数，然后担心这种调用可能会非常昂贵，如果jQuery必须遍历DOM中的每个元素来绑定此事件。

或者，也许它和事件一样高效。我读过的jQuery文档没有说清楚。有什么意见？

Answer 1

有两件事可以让你的事件绑定代码变慢：选择器和＃绑定。其中最关键的是绑定数量，但选择器可能会影响您的初始性能。

就选择器而言，只要确保不要使用像.myclass这样的纯类名选择器。如果您知道myclass的类将始终处于<div>元素中，请将您的选择器设置为div.myclass，因为这有助于jQuery更快地找到匹配的元素。另外，不要把jQuery的优势让你给它巨大的选择器字符串。它可以用字符串选择器做的所有事情，它也可以通过函数完成，这是有意的，因为它可以这样做（稍微，不出所料），因为jQuery不必坐下来解析你的字符串来找出什么你要。所以，而不是做$('#myform input:eq(2)');你可能做$('input','#myform').eq(2);。通过指定一个上下文，我们也不会让jQuery看起来不需要它，这要快得多。 More on this here。

至于绑定的数量：如果你有相对中等数量的元素，那么你应该没问题 - 任何高达200,300个潜在元素匹配将在现代浏览器中表现良好。如果您不止这些，您可能需要考虑事件委派。

什么是事件授权？从本质上讲，当您运行这样的代码：

$('div.test').click(function() { 
    doSomething($(this)); 
}); 

jQuery是做这样的事情在幕后（结合对每个匹配元素的事件）：

$('div.test').each(function() { 
    this.addEventListener('click', function() { 
     doSomething(this); 
    }, false); 
}); 

这可以让低效率的，如果你有一个大量元素。通过事件委托，您可以将绑定的数量减少到一个。但是如何？事件对象具有一个target属性，可让您知道事件处理的元素。所以你可以做这样的事情：

$(document).click(function(e) { 
    var $target = $(e.target); 
    if($target.is('div.test')) { // the element clicked on is a DIV 
           // with a class of test 
     doSomething($target); 
    } 
}); 

谢天谢地，你实际上不必用jQuery编写上面的代码。 live函数作为一种将事件绑定到尚不存在的元素的简单方法进行了公布，实际上可以通过事件委托来执行此操作，并在目标与您为其指定的选择器匹配时检查操作发生时执行此操作。当速度很重要时，这具有副作用，当然是非常方便的。

故事的寓意是什么？如果您担心绑定的数量，您的脚本只需将.bind替换为.live，并确保您具有智能选择器。

但请注意，并非所有事件都受.live支持。如果你需要某些不支持的东西，你可以查看livequery插件，它是用类固醇生活的。

Answer 2

基本上，你不会做得更好。 它所做的只是在每个选定的元素上调用attachEventListener（）。

仅在解析时间上，此方法可能比在每个元素上设置内联事件处理程序更快。

一般来说，我会认为这是一个非常便宜的操作。