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

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);

---

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

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

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

---

三。一次将事件处理程序附加到父项

这个方法和以前的方法一样，只是有一点不同。 我只会附加一次事件处理程序，我会检查 处理程序本身中所需的选择器：

$('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 选择器进行检查。

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

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

证明它的测试：

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

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

您可以看到它仅测量事件执行。 3d 案例快两倍多。间隙将相对于 DOM 树中元素的位置发生变化。