事件处理程序的JavaScript执行顺序

JavaScript order of execution of event handlers

本文关键字：执行顺序 JavaScript 程序事件处理更新时间：2023-09-26

如果多个事件处理程序附加到同一元素上的同一事件，它们的执行顺序是什么？

我已经看了这个更具体的点击事件。这表明，标准并没有对订单做出任何规定。

所以，我的问题是，事件的执行顺序是什么？（该事件可以是任何同步或异步的事件）

根据经验测试，点击事件处理程序是按照附加到对象的顺序执行的。第一个附加的是第一个执行的。

这是我在Chrome、Firefox、IE9和Safari中运行的一个测试台，它们都按照最初附加的顺序执行事件处理程序。

工作试验台：http://jsfiddle.net/jfriend00/yTYxV/

事件处理程序的执行顺序应该无关紧要。我不能确定，但我认为标准没有具体说明这一点。每个实现都可以自由选择最适合其流的算法。

事件处理程序应该是独立的。事件处理程序不应依赖于另一个事件处理程序或另一个处理程序的执行效果。事件处理程序甚至不应该知道为同一事件安装了其他处理程序。

如果这对您来说很重要，那么处理程序之间就有了耦合。耦合是人为的（例如，某些数据结构是共享的，不是因为它需要共享，而是因为这是编写代码时最简单的方法），在这种情况下，您可以删除它；或者耦合表明，本应保留在一个处理程序中的处理已被人为地拆分为两个（或多个）独立的处理程序。

事实上，您的问题揭示了应用程序体系结构中的一个问题。解决问题（使事件处理程序独立），神奇的是，您将不再关心它们的执行顺序。额外的好处是，您的应用程序将设计得更好，更容易修改和推理其行为。