一次绑定到多个元素上的事件时是否有任何性能提升？

Question

我想知道是否将事件处理程序附加到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', ...

我要求因为我必须根据输入的类型选择事件（change或input）

Answer 1

我建议stuff.on超过$(stuff[i]).on，因为jQuery基本上是为你做的。

如果您look at the source code，您会看到他们执行以下操作：

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

但addEventListener并非100％受旧浏览器支持，jQuery会为您处理这些细节。

要记住的另一个重要细节是，每次执行$(something)时，都会创建一个新对象，这肯定会使第二种方法的性能降低。

如果可能的话，您可能想要附加到父元素（假设stuff中的所有内容都在一个共同的父元素下）并在那里拾取事件。如果适用的话，这肯定是最好的选择。

<强> TL; DR 只做$(selector).on(event, callback)。你会为自己节省一些周期，记忆和心痛。