javascript - 为什么在事件侦听器中间等待的异步函数会丢弃事件的状态和阶段？

Question

为什么在事件侦听器中间等待的异步函数会丢弃事件流的状态和阶段？有可能保留吗？

例如，

button.addEventListener("click", async (event) => {
  eventSnapshots.push({
    title: "Sync",
    object: extract(event)
  });

  syncFn(event);
  await asyncFn();
  syncFn(event);

  writeToElement(eventSnapshots, view);
});

事件流的快照将是这样的：

Sync:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}
SyncFn:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}

//await AsyncFn

SyncFn:
{
  "phase": 0,
  "currentTarget": null,
  "path": 0,
  ...
}

( https://codesandbox.io/s/pensive-hill-nzxvnl?file=/src/index.js:514-745 )

Answer 1

并不是等待承诺“放弃”它，而是事件在调用您的侦听器函数后继续冒泡async，而不是等待它返回的承诺。冒泡会在不同元素上使用相同的事件对象运行处理程序时自动更改currentTarget，并在到达文档的根时变为undefined. 然后，当您稍后返回异步代码再次查看时event，它已经被更改了。使用时也会发生同样的情况setTimeout。