JavaScript事件处理程序执行顺序

Question

如果在同一元素上绑定了多个事件处理程序，它们会以什么顺序执行？

我查看了与点击事件更具体相关的此处。而此处则表示标准并未指定任何关于顺序的内容。

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

- hrishikeshp19

Answer 1

据我经过实证测试所得，点击事件处理程序按照它们附加到对象的顺序执行。首先附加的处理程序是第一个执行的。

以下是我在Chrome、Firefox、IE9和Safari上运行的测试样例，它们都按照最初附加的顺序执行事件处理程序。

工作测试样例：http://jsfiddle.net/jfriend00/yTYxV/

- jfriend00

Answer 2

事件处理程序的执行顺序不应该影响结果。我不能确定，但我认为标准没有对此做出任何规定。每个实现都可以自由选择适合其流程的算法。

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

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

事实上，你的问题揭示了应用程序架构中的问题。解决问题（使事件处理程序独立）并且神奇的是，你将不再关心它们以哪种顺序执行。额外的好处是，你的应用程序将设计得更好，更容易修改，并且更容易理解其行为。

- axiac