在 JavaScript 中，事件处理程序可以附加到 HTML 元素上，以便在特定事件发生时执行某些代码。例如，单击按钮、鼠标移动或按键按下等。
但是，在多个事件处理程序附加到同一元素时，这些处理程序是否按顺序执行呢？本文将探讨这个问题。
事件循环模型
要了解事件处理程序是如何执行的，我们需要先了解 JavaScript 中的事件循环模型。当 JavaScript 引擎遇到事件时，它将其添加到事件队列中。然后，JavaScript 引擎将继续执行当前任务，直到该任务完成。
完成任务后，JavaScript 引擎将检查事件队列是否有待处理的事件。如果有，它将从队列中取出下一个事件并执行相应的事件处理程序。这个过程被称为“事件循环”。
如果事件队列中有多个事件，则它们将按照添加的顺序排队等待处理。因此，如果多个事件处理程序附加在同一元素上，则它们将按照添加的顺序调用。
示例代码
考虑以下示例代码：
<button id="myButton">Click me</button>
-- -------------------- ---- ------- ----- ------ - ------------------------------------ -------------------------------- -- -- - ------------------ ---------- --- -------------------------------- -- -- - ------------------- ---------- --- -------------------------------- -- -- - ------------------ ---------- ---展开代码
在上面的代码中，我们为按钮添加了三个单击事件处理程序。当单击按钮时，我们期望按照添加的顺序输出以下内容：
First handler Second handler Third handler
运行代码后，我们可以看到输出确实按照预期顺序显示。
结论
在 JavaScript 中，事件处理程序是按照添加的顺序调用的。这意味着，如果您想强制执行某些操作，例如确保第一次事件处理程序完成后才能执行第二个事件处理程序，则可以将它们按照需要的顺序添加到元素中。
但是，请注意，如果多个事件处理程序附加到不同的元素，并且这些元素具有嵌套关系，则按照添加的顺序调用处理程序无法得到保证。这时候建议写一个聚合函数来处理这样的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31427
