jQuery/JavaScript如何处理绑定到同一元素的多个事件处理程序&事件，以及后果

How does jQuery/JavaScript handle multiple event handlers bound to the same element & event, and what are the consequences?

本文关键字：程序 事件处理 amp 后果 事件 元素 何处理 JavaScript 处理 绑定 jQuery      更新时间：2023-09-26

考虑以下代码：

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

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

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

相关文章：