JS 处理与监听器并行发生的事件

Question

我不确定某些 JS 代码运行时如何生成事件。

例如，在这种情况下：

<div id="div1"> text </div>
<div id="div2"> text </div>

div2.onpointermove = (e) => {
    console.log("old handler");
};
div1.onpointerdown = (e) => {
    div2.onpointermove = (e) => {
        console.log("new handler");
};  };

布局：

+-----+-----+
|div1 | div2|
+-----+-----+

场景：

1. 指针在 div1 的边缘像素上向下
2. 指针移动到 div1 之外并进入 div2

当 JS 代码运行时在单线程上，用户可以平行移动鼠标来运行一些JS代码。我想知道，当一些JS代码运行时，事件是如何生成并处理的？

可能的时间线：

A)

1. 指针向下放在 div1 的边缘像素上，
2. 将鼠标移动到与事件侦听器 JS 代码并行运行的 div2 上
3. ，同时 JS 代码处理事件侦听器，鼠标事件排队
4. 调用div1.onpointerdown
5. 添加新处理程序div2.onpointermove
6. 排队的鼠标事件使用new处理强> 听众集
7. “new handler”打印在控制台上

B)

1. 指针向下放在 div1 的边缘像素上
2. 将鼠标移动到与事件侦听器 JS 代码并行的 div2 上，
3. 同时 JS 运行代码处理事件监听器，鼠标事件被忽略
4. 调用div1.onpointerdown
5. 添加新处理程序div2.onpointermove
6. 开始再次注册事件
7. 指针移动在div2丢失，控制台没有打印任何内容（如果div1.onpointerdown处理完后鼠标没有移动，并且JS没有比较前后鼠标位置处理代码块)

C)

1. 将指针向下放在 div1 的边缘像素上
2. 将鼠标移动到与事件侦听器平行的 div2 上 JS 代码
3. 在 JS 代码处理时 运行事件监听器，鼠标事件是排队要使用当前的旧事件侦听器集进行处理
4. 调用div1.onpointerdown
5. 添加新处理程序div2.onpointermove
6. 使用旧处理队列中的下一个事件，记录的事件侦听器
7. “旧处理程序”打印在控制台上

我不知道，会发生哪种情况，或者是否依赖于浏览器？

pointerdown、pointermove 仅用于示例目的，我对这些确切事件的怪癖不感兴趣，而是对如何生成事件的更一般概念感兴趣/在某些 JS 代码运行时保存/忽略/处理，这会为与代码块运行并行发生的事件添加事件处理程序。

另外，是否存在通用行为，或者是否存在特定于实现的细节？

Answer 1

一般来说，使用方法 A - 事件排队，然后在 JS 事件循环完成先前处理程序的执行后进行处理。

然而，快速且连续（不离散）的事件，如滚动或鼠标移动（而不是点击或按键）可以被引擎限制，这样，如果 JS 代码处理它们需要很长时间，它就会触发更少的事件。这可能相当于丢弃一些事件（方法 B）——但是你怎么知道呢？

至于方法C，则不使用。排队的是事件，而不是运行注册处理程序的任务。这在删除事件侦听器时尤其重要 - 在调用 removeEventListener 后，您可以确定不会再次调用它，即使触发该事件的事件仍在排队中也是如此。然而，对于安装新的事件侦听器，并没有真正的方法来区分 - 代码无法判断事件是在安装侦听器之前还是之后触发的，因此这为浏览器提供了一些优化的余地。