Javascript 在一次绑定到多个元素上的事件时有没有性能提升？

我想知道将事件处理程序附加到jQuery集合是否比在元素上循环并在每个元素上附加事件处理程序更快

var stuff = $();

// then some code that builds the list
// stuff = stuff.add(...);

stuff.on('change', ...

与包含元素的数组相比：

for (var i = 0; i < stuff.length; i++)
  $(stuff[i]).on('change', ...

for（var i=0；i

---

我这样问是因为我必须根据输入类型选择事件（

change

或

input

），我建议做

stuff.on

over

$（stuff[I]）。on

，因为jQuery基本上是在幕后为你做的

如果您看到他们执行以下操作：

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

其中，

add

是用于附加事件侦听器的实际函数。如果您完全关心性能，则可以通过绕过jQuery并更手动地附加侦听器来加快速度：

function onChangeListener() { ... }
for (var i = 0, len = stuff.length; i < len; i++) {
    stuff[i].addEventListener('change', onChangeListener);
}

函数onChangeListener（）{…}
for（var i=0，len=stuff.length；i

但是，

addEventListener

并不是100%受旧浏览器支持，jQuery将为您处理这些细节

要记住的另一个主要细节是，每次执行

$（某物）

时，都会创建一个新对象，这肯定会降低第二个方法的性能

如果可能的话，您可能希望附加到父元素（假设

stuff

中的所有内容都在一个公共父元素下）并在那里拾取事件。如果适用，这肯定是最好的选择

TL；DR

---

只需执行

$（选择器）。在（事件、回调）

上。您将为自己节省一些周期、内存和心痛。

可能是的（非常非常少，您甚至可以测量），但是…您的用户会注意到这一点吗？可能不会（否则您不会使用jQuery）所以我会一直使用最干净可读的代码。live事件处理程序在这里工作吗？那么只需要在浏览器中注册一个事件。您也可以查看事件委派。