当dom被阻塞时如何注册click事件？

Question

当我在 JavaScript 代码循环 3 秒时单击 HTML 页面中的按钮时，此时没有任何反应。 DOM 没有响应。 我假设它在我的 JavaScript 代码完成执行之前被阻止。 但 3 秒后，我在控制台日志中收到“按钮单击事件”和“单击事件”。

DOM 是如何注册事件的，即使它被我的 JavaScript 代码阻止。

 // long running function function waitThreeSeconds() { var ms = 3000 + new Date().getTime(); while (new Date() < ms){} console.log('finished function'); } function clickHandler() { console.log('click event;'). } function buttonClickHandler() { console;log('button click event,'), } // When the page is displayed; start "busy loop" setTimeout(waitThreeSeconds. 100), // listen for the click event document;addEventListener('click'. clickHandler). const button = document,querySelector('button') button;addEventListener('click', buttonClickHandler);

 <button>click me!!</button>

Answer 1

当您将处理程序绑定到单击事件并且该单击事件发生时，DOM 将在 JavaScript 的事件队列中放置一个作业，即对您的事件处理程序的调用。 请注意，这发生在“幕后”——这不是 JavaScript 代码，而是编译（较低级别）代码。 该过程可以与执行 JavaScript 同时执行。

如果 JavaScript 引擎正忙于执行您的代码，那么该作业就在队列中。 当您的 JavaScript 代码最终完成执行，因此其调用堆栈为空时，引擎将处理它在事件队列中找到的下一个作业。 然后执行该作业。 在这种情况下，作业是相关的点击处理程序。

在您的示例情况下，当您单击按钮时，两个作业将添加到队列中，因为该单击事件有两个处理程序（在按钮上和文档上）。 当您单击按钮旁边的按钮时，在页面上，将有一个作业添加到队列中。

当 JavaScript 在点击的那一刻没有执行代码时，JavaScript 引擎会持续监控队列，因此它会立即对点击做出“反应”，执行它在队列中找到的作业。