事件循环如何处理 JavaScript 中的 DOM 事件处理程序？

Question

我对浏览器如何处理 JavaScript 事件有点困惑。

假设我有两个事件处理程序附加到按钮 A 和 B。这两个事件处理程序花费完全相同的时间来完成。如果我先单击按钮 A，然后单击按钮 B，那么按钮 A 的事件处理程序是否总是首先执行（因为事件循环是一个 FIFO 队列），但是它们何时完成是完全不可预测的？如果是这样，实际上是什么决定了这个顺序？

是的

Answer 1

这就是事件循环作为并发模型的美妙之处。您不必考虑诸如死锁、活锁和竞争条件之类的线程问题

大多数时候

（尽管并非总是如此）。 执行顺序很简单，浏览器中的 JavaScript 是单线程的 大多数

，在实践中您不必担心事物的执行顺序。 然而鼠标事件的顺序是有保证的与JavaScript几乎没有任何关系

。这不是 JavaScript 语言的一部分，而是称为 DOM API 的一部分，DOM（文档对象模型）是 JavaScript 与浏览器和您编写的 HTML 交互的方式。

称为 Host Objects 的东西在 JavaScript 规范中被定义为浏览器中 JS 所使用的外部对象，并且在这种情况下它们的行为是在 DOM API 中指定的。 是否保证 DOM 事件注册的顺序不是 JavaScript 的一部分，而是该 API 的一部分。更具体地说，它是在here

定义的。所以对于你的问题：是的，除了控制键（例如（control alt delete））之外，事件执行的顺序是确定的，这可能会弄乱评估的顺序。

Javascript 引擎是单线程的。所有事件处理程序都按顺序发生； A 的点击处理程序将被调用，并在 B 的处理程序启动之前

完成。您可以通过在一个处理程序中

sleep()

Answer 2

来查看这一点，并验证第二个处理程序在第一个处理程序完成之前不会启动。

请注意，setTimeout对于此测试无效，因为它本质上是向引擎注册一个函数，以便稍后回调。

setTimeout

立即返回。

这个小提琴

应该展示这种行为。

当由 javascript 执行时，命令确实位于 FIFO 中。但是，处理程序可能需要不同的时间才能向您发送结果。在这种情况下，处理程序 B 的响应可能会更早返回，而处理程序 A 的响应可能会稍后返回。