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（）。

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

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

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

2 个答案: