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

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

不是等待承诺“放弃”它，而是事件 continues to bubble after calling your async listener function, without waiting for the promise returned by it. Bubbling automatically changes the currentTarget when running handlers with the same event object at different elements, and when reaching the root of the document it becomes undefined. Then when you async code comes back to look at the event again later, it will already have been changed. 。

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

Why an async function, that is being awaited in the middle of the event listener, drops the state and phase of the Event?

javascript

event-handling

dom-events

event-flow

async-await