JavaScript/浏览器 : when does event dispatching exactly happen?

Question

这个SO question & answers和 DOM level3 docs声明在浏览器中同步调度手动事件。然而，我的问题涉及与用户相关的事件(真实点击)，而不是手动触发的事件。

我创建了一个small jsfiddle demo使用按钮 + onclick 处理程序，该处理程序会执行 2 秒的同步工作(阻止同步等待，足够长的时间让我的眼睛看到发生了什么)。打开控制台查看 console.logs。

测试。我点击按钮几次。尽管第一次单击(及其同步处理)使按钮被按下(看起来像是禁用的)，但其他单击也会被存储并稍后通过事件循环异步处理。

问题是:

• 事件分派(dispatch)到底什么时候发生？用户事件(例如点击)是否立即推送到 JS 消息队列，或者是否存在中间 Web API 队列...或者换句话说 - 此事件调度与哪个队列相关？
• 大多数事件(click、blur 等 - 除了 load)在发生用户事件时同步处理，这意味着什么(不是手动的)？根据上面的测试，第一次单击会执行同步阻塞回调(我希望在此期间不会发生其他任何事情)，并且无论如何，下一次单击都会存储在队列中。因此，存储事件无论如何都是并行的(必须是并行的，因为主 javascirpt 线程很忙)。理论上，事件是异步处理的，会有什么区别吗？

<小时/>

slightly modified demo显示对于给定的单击事件，该事件会冒泡并调用所有相关的事件处理程序，就像事件冒泡被阻塞一样，直到发生其他情况(本例中为超时)。但仍然不清楚为什么事件调度是同步的。

Answer 1

在真实事件的上下文中谈论同步没有什么意义，因为事件队列仅在当前执行堆栈已清空时(即没有更多同步代码可执行时)才会被处理。执行。这使得相关的事件处理程序异步。对于您在 fiddle 中提供的点击事件处理程序也是如此。

正在运行的代码在运行时会阻止任何其他操作，这并不表明该代码是如何触发的:异步还是同步。在这两种情况下，持续 2 秒的繁忙循环将阻塞 2 秒。当我们说代码异步运行时，它只说明代码如何/何时被调用，而不是它如何运行。同步和异步代码都以阻塞的方式运行。但也有一些异常(exception)——例如 web workers在自己的线程中运行。

这些“真实”的事件被推送到JS消息队列上。当然，它们首先从操作系统事件队列中消耗，但这是特定于实现的。重要的是它们最终会与它们的处理程序一起进入 JS 消息队列。 JavaScript 引擎仅在先前运行的代码ran to completion 时处理事件。 。因此，这些事件处理程序被异步调用。

对于“手动”事件，即由 jQuery 的 .trigger() 方法等代码触发的事件，区分异步和同步是有意义的。在异步情况下，事件将被放入 JS 队列中，当前代码将首先运行完成。在同步情况下，事件不会被放入 JS 队列中，而是像函数调用一样执行。因此，事件的处理作为调用堆栈上的附加调用发生，之后您的代码将恢复，就像从正常函数调用返回后一样:这是同步行为。

这里我忽略micro tasks的概念，这只是意味着执行异步代码有不同的优先级。