Question

我想知道很多事件听众是否会采取行动。

例如，如果我有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
    });

所以我想知道的是......它在性能上是否有任何意义

由于

Answer 1

一次一个地添加到每个元素，而一次将它添加到50，在绑定事件后没有任何区别。您可以使用jsperf来证明执行一个或另一个更快地绑定事件，但事件的实际处理将没有任何不同，假设在两种情况下您都直接绑定到元素而不执行委派。

另一方面，使用事件委托（例如在主体上绑定click事件并测试event.target是否与选择器匹配）比将click事件直接绑定到元素要慢，因为事件必须冒泡在它被处理之前到身体。它还必须执行之前发生的所有处理程序，这样也会影响性能。这就是为什么在使用事件委派时，最好将委托目标设置为尽可能接近事件目标。

Javascript（jQuery）事件监听器性能

1 个答案: