jQuery/JavaScript如何处理多个事件处理程序绑定到相同的元素和事件，并有什么后果？

Question

考虑下面的代码：

$('div').click(function(){ 
    $(this).animate({height:100}, 500) 
    $(this).css({opacity:1}); 
}); 

对战：

$('div').click(function(){ 
    $(this).animate({height:100}, 500); 
}) 
.click(function(){ 
    $(this).css({opacity:1}); 
}); 

是否jQuery的或JavaScript基本上是“编译”的第二个代码示例弄成第一，而不是维护两个独立的事件处理程序？我问jQuery或JavaScript是否这样做是因为我也有兴趣知道这样的“编译”是否是本机JS的特性或者是由jQuery实现的。

在我看来，这个“编译”实际上并没有完成，至少没有消除两个代码示例之间的差异。使用JSPerf，I compared the speed between each one，看起来第一个代码示例显着更快。

Answer 1

处理程序按照它们绑定的顺序被触发，并且每个$('div').click()将另一个处理程序绑定到相关元素。在你的情况下，第一个只绑定1个事件处理程序，并因此执行得更快，因为它只触发一个事件。第二个绑定两个事件处理程序，因此速度较慢，因为它会触发两个事件而不是一个（更多开销）。

Answer 2

我认为他们是作为两个单独的事件维护。触发后，它们将按照与绑定顺序相同的顺序执行。