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

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

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

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

我想单独将click事件处理程序附加到所有它们,我有三个选项.

I.直接附加事件处理程序

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

$('.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(); }
});

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

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

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

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

第一个是用jQuery绑定事件的常用方法,因此是最快的一个.

转载注明原文:通过性能将事件处理程序附加到jQuery中的元素的最佳方法 - 代码日志