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，我比较了每个样本之间的速度，发现第一个代码样本的速度要快得多。

Answer 1

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

Answer 2

我认为它们被维护为两个独立的事件。当被触发时，它们将按照绑定时的相同顺序执行。