模拟DOM事件的浏览器默认动作的执行

Question

我有一些代码通过 DOM API（createEvent、initEvent、dispatchEvent 等）触发/模拟 DOM 事件。对于大多数 DOM 事件（例如单击），有一个浏览器默认操作，例如跟随链接。

由于 JavaScript 代码执行是单线程的，我不确定当我的代码批量触发多个事件时执行流程如何。所以假设我这样做（伪代码）：

for (var i = 0; i < 10; i++) {
  var event = document.body.createEvent('MouseEvent');
  event.initMouseEvent(...);
  document.body.dispatchEvent(event); 
}

会发生什么？我的循环是否首先完全执行，然后处理所有事件，导致默认浏览器操作触发并注册事件侦听器执行？还是每次调用dispatchEvent触发默认动作（和事件监听器）时代码执行中断？

谢谢

Answer 1

因为 JS 不是多线程的，所以每次调度事件时都会立即触发 - 实现不会创建一些事件队列以在下一个周期触发。

这是旧的mutation events 已被弃用的原因之一。例如，如果您向一个节点添加 400 个元素，它将触发 400 个突变事件（传播），从而减慢几乎所有内容。

因此，在您的代码 sn-p 中，循环的每次迭代都会创建鼠标事件、调度鼠标事件、处理鼠标事件的所有侦听器，然后继续执行循环的下一次迭代。