jQuery / JavaScript如何处理绑定到同一元素的多个事件处理程序＆amp;事件，后果是什么？

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，我compared the speed between each one，看起来第一个代码示例要快得多。

Answer 1

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

Answer 2

我认为它们被视为两个独立的事件。触发后，它们将按照绑定的顺序执行。