Javascript（jQuery）事件監聽器性能

我想知道很多事件監聽器是否具有性能。Javascript（jQuery）事件監聽器性能

例如，如果我有50個元素上點擊事件監聽，它做出改變，如果我對每個元素的一個聽衆50個事件監聽器，像這樣

$('#one').on("click",function(){ // do something; }); 
$('#two').on("click",function(){ // do something else; }); 
... 
$('#fifty').on("click",function(){ // do something else; });

或只是一個事件偵聽器

$('.listen_to_click').on("click",function(){ 
// handle action here depending on data attribute or something else 
}); 

//or does jQuery add here an event listener internally on every .listen_to_click element so that it doesn´t make any change at all - in this case does it change when you do like so 

$('body').on("click",'.listen_to_click',function(){ 
// handle action here depending on data attribute or something else 
});

或當您使用普通的JavaScript做這樣的事情

document.getElementByTagName('body').addEventListener("click",function(e){ 
// handle action on e.target or something else 
});

代替

document.getElementById('one').addEventListener("click",function(e){ 
    // do something 
    }); 
document.getElementById('two').addEventListener("click",function(e){ 
    // do something else 
    }); 
... 
document.getElementById('fifty').addEventListener("click",function(e){ 
    // do something else 
    });

所以，我想知道的是..它任何意義性能

感謝

來源

2014-05-01 delueg

可能有意義的測試它。 jsperf.com。 – j08691

香草JS總是會更快。這是事實，也是常識。低級別的任何東西都會比高級抽象包裝代碼更快。 –

@ RPM肯定香草JS總是更快 - 我編輯的問題..因爲我想知道是否做出改變，如果你有一個身體聽衆例如，並處理你的行動在這一個功能 – delueg

同時它添加到每個元素一個VS將它添加到50在事件發生後，馬上就沒有任何區別。你也許可以做一個jsperf來證明做一個或另一個綁定事件的速度更快，但事件的實際處理不會有任何不同，假設在這兩種情況下你都直接綁定元素而不是委派。

另一方面，使用事件委託，例如在body上綁定click事件，並測試event.target是否匹配選擇器，會比直接將click事件綁定到元素更慢，因爲事件必須冒泡在它可以被處理之前到達身體。它還必須執行所有在它之前發生的處理程序，以便也可以影響性能。這就是爲什麼在使用事件委託時，最好將委託目標設置爲儘可能接近事件目標。

來源

2014-05-01 21:10:05

「這就是爲什麼在使用事件委託時，最好將委託目標設置爲儘可能接近事件目標。」正是如此。 '（文件）.on（'click'，'＃my-dv'）;'vs'$（'＃container'）。on（'click'，'＃my-db'）;' –

ok - 什麼是在這種情況下，如果我只有一個綁定事件的身體和處理一個處理函數內的操作 - 我的意思是我可以檢查例如當前目標的ID或數據屬性，並處理該參數的操作 – delueg

確定完美...謝謝 – delueg

Javascript（jQuery）事件監聽器性能

回答

相關問題