jquery - 通过性能将事件处理程序附加到 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，事件绑定(bind)的操作对性能影响不大。应该考虑的是在处理程序中执行的操作。这就是为什么第三种选择可能是最糟糕的。

第二个选项，据我所知，通常用作事件委托(delegate)。大多数情况下，当您想要将事件绑定(bind)到元素时，该事件将在将来创建，即通过 AJAX:

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

第一个是将事件与 jQuery 绑定(bind)的常见方式，因此是最快的方式。