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|
+-----+-----+

设想情况：

div1

• pointermove边缘像素上的

1. 后插到div1之外并进入div2

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

可能的时间表：

a)

div1

• move的边缘像素向下的鼠标指向div2并行的事件侦听器JS代码running

• while JS代码处理事件侦听器，鼠标事件是queued

• invoke div1.onpointerdown

• add新的处理程序div2.onpointermove

• the排队的鼠标事件用新的listeners

• "new处理程序集被打印在控制台

上。

b)

div1

• move的边缘像素上的

1. 指针鼠标沿div2平行于事件侦听器JS代码running
2. while JS代码处理事件侦听器，鼠标事件是ingored
3. invoke div1.onpointerdown
4. add新处理程序div2.onpointermove
5. start再次注册事件
6. 指针在div2上移动丢失，控制台上没有打印任何东西(如果鼠标在div1.onpointerdown完成处理后没有移动，而JS在处理代码块(

)之前并没有比较鼠标的位置。

c)

鼠标沿div1

• move边缘像素向下向下移动到与事件侦听器JS代码running

• while并行的div2上JS代码处理事件侦听器，鼠标事件被排队的与当前、旧集的事件新处理程序div2.onpointermove

• process一起处理下一个事件从队列中的旧、记录的事件listeners

• "old处理程序“打印在控制台上< code >h 283G 284

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

pointerdown，pointermove只是为了这个示例的目的，我不感兴趣的是这些确切事件的古怪之处，而是在某些JS代码运行时如何生成/保存/忽略/处理事件的更一般的概念，即为那些并行运行代码块的事件添加事件处理程序。

另外，如果有普遍的行为，还是有具体的实现细节？

Answer 1

通常，使用方法A-事件排队，然后在JS事件循环完成以前处理程序的执行后进行处理。

但是，快速和连续的(非离散的)事件，如滚动或鼠标移动(相对于单击或按键)，可以被引擎控制，因此如果JS代码处理它们需要很长时间，它就会触发更少的事件。这可能等于放弃了一些事件(方法B) --但是你怎么知道呢？

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