一次綁定到多個元素上的事件時是否有任何性能提升？

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[i]).on做stuff.on $(stuff[i]).on因為 jQuery 本質上是在stuff.on為你做的。

如果您 查看源代碼，您會看到它們執行以下操作：

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) 。 你會為自己節省一些周期、記憶和心痛。