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

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

    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.

    Handler functions may mutate the event object.

    1. function handler1(event) {
    2.   console.log(event.type);  // Prints 'foo'
    3.   event.a = 1;
    4. }
    6. async function handler2(event) {
    7.   console.log(event.type);  // Prints 'foo'
    8.   console.log(event.a);  // Prints 1
    9. }
    11. const handler3 = {
    12.   handleEvent(event) {
    13.     console.log(event.type);  // Prints 'foo'
    14.   }
    15. };
    17. const handler4 = {
    18.   async handleEvent(event) {
    19.     console.log(event.type);  // Prints 'foo'
    20.   }
    21. };
    23. const target = getEventTargetSomehow();
    25. target.addEventListener('foo', handler1);
    26. target.addEventListener('foo', handler2);
    27. target.addEventListener('foo', handler3);
    28. target.addEventListener('foo', handler4, { once: true });