Question

通过性能将事件处理程序附加到jQuery中的元素的最佳方法是什么？

我想要将事件处理程序附加到它们的所有元素都是静态的我们没有任何生成和动态创建的元素：

<div class="foo"></div>
<div class="bar"></div>
<div class="qux"></div>

我想将click事件处理程序分别附加到所有它们，我有三个选项。

予。直接附加事件处理程序

在这个经典方法中，我将事件处理程序直接附加到元素：

$('.foo').on('click', f);
$('.bar').on('click', g);
$('.qux').on('click', h);

II。多次将事件处理程序附加到父级

在这个方法中，我将为每个元素多次将事件处理程序附加到父方法中，而不是之前的方法：

$('body').on('click', '.foo', f);
$('body').on('click', '.bar', g);
$('body').on('click', '.qux', h);

III。仅将事件处理程序附加到父级

这个方法就像以前的方法一样，除了一个区别。我只会附加一次事件处理程序，我会检查处理程序本身中所需的选择器：

$('body').on('click', function (e) {
    var $elem = $(e.target);

         if ($elem.is('.foo')) { f(); }
    else if ($elem.is('.bar')) { g(); }
    else if ($elem.is('.qux')) { h(); }
});

我想知道哪一个是性能最好的？

Answer 1

决定将其从评论转移到答案。
IMO，事件绑定的操作不会对性能产生太大影响。应该考虑的是操作，在处理程序中执行。这就是为什么第三个选项可能是最差的。

第二个选项，AFAIK，通常用作事件委派。大多数情况下，如果您想要将事件绑定到元素，将来会创建，即通过AJAX：

$(document).on('click', '.futureElement', alert);
$.post("someurl", {data: someData}, function () {
   //create element with class .futureElement
});

第一个是使用jQuery绑定事件的常用方法，因此是最快的一个。

Answer 2

你的第三个解决方案肯定是最糟糕的解决方案，因为它会在点击事件被触发时检查元素的类。

这里的瓶颈是jQuery选择器解析，所以第一个解决方案是最有效和可读的解决方案。

Answer 3

让我不同意其他答案。

即使在这里进行测试http://jsperf.com/test-so-1也说最后一个选项是最快的。但我可以尝试解释原因。

在这种情况下：

$('body').on('click', '.foo', f);

我们使用标准的jquery方式绑定委托事件。我们将事件绑定到body并让jQuery对.foo选择器进行检查。每个事件都有一个属性e.target，它实际上启动了该事件。但事件会使DOM冒泡，因此我们的.foo选择器可以匹配e.target的父项之一。所以jQuery必须进行额外的遍历，例如找到e.target的所有父母，并与.foo选择器进行核对。

我们直接只检查e.target的3d选项。

如果.foo选择器靠近body，则性能没有太大差异。但是如果.foo选择器位于DOM树的深处，则jQuery必须遍历e.target的许多父项。

测试证明它：

http://jsfiddle.net/xDyuJ/1/

http://jsfiddle.net/xDyuJ/2/

您可以看到它仅衡量事件执行情况。 3d情况快了两倍。差距将相对于DOM树中元素的位置发生变化。

通过性能将事件处理程序附加到jQuery中的元素的最佳方法

予。直接附加事件处理程序

II。多次将事件处理程序附加到父级

III。仅将事件处理程序附加到父级

3 个答案: