事件监听器

【Event listener】

注册到某个事件 type 的事件监听器可以是 JavaScript 函数，也可以是拥有 handleEvent 属性（其值为函数）的对象。

【Event listeners registered for an event type may either be JavaScript functions or objects with a handleEvent property whose value is a function.】

在任何情况下，处理函数都会被调用，并传入传递给 eventTarget.dispatchEvent() 函数的 event 参数。

【In either case, the handler function is invoked with the event argument passed to the eventTarget.dispatchEvent() function.】

异步函数可以用作事件监听器。如果异步处理函数被拒绝，该拒绝将被捕获并按照 EventTarget 错误处理 所述进行处理。

【Async functions may be used as event listeners. If an async handler function rejects, the rejection is captured and handled as described in EventTarget error handling.】

一个处理函数抛出的错误不会阻止其他处理函数被调用。

【An error thrown by one handler function does not prevent the other handlers from being invoked.】

句柄函数的返回值会被忽略。

【The return value of a handler function is ignored.】

句柄始终按照其添加的顺序被调用。

【Handlers are always invoked in the order they were added.】

处理函数可能会修改 event 对象。

【Handler functions may mutate the event object.】

function handler1(event) {
  console.log(event.type);  // Prints 'foo'
  event.a = 1;
}

async function handler2(event) {
  console.log(event.type);  // Prints 'foo'
  console.log(event.a);  // Prints 1
}

const handler3 = {
  handleEvent(event) {
    console.log(event.type);  // Prints 'foo'
  },
};

const handler4 = {
  async handleEvent(event) {
    console.log(event.type);  // Prints 'foo'
  },
};

const target = new EventTarget();

target.addEventListener('foo', handler1);
target.addEventListener('foo', handler2);
target.addEventListener('foo', handler3);
target.addEventListener('foo', handler4, { once: true }); 拷贝