addEventListener

AddEventListener is a method of the EventTarget interface used to register event listeners on DOM elements and other event targets such as window and document. It is a core mechanism for handling user interactions, network events, and custom events in web applications.

Usage typically follows: element.addEventListener(type, listener, options). The type is a string such as "click" or "keydown"; listener is a function receiving an event object (or an object with a handleEvent method); options can be a boolean or an object. A boolean is a legacy way to indicate a capture phase flag. When an options object is used, it can include capture, once, and passive. The capture flag determines whether the listener is invoked during the capturing phase; once indicates the listener should be automatically removed after its first invocation; passive hints that the listener will not call preventDefault, allowing for better performance on certain events like scrolling.

When an event is dispatched via dispatchEvent, appropriate listeners are invoked in a defined order: those registered for the capturing phase run first from the top of the document tree down to the target, then listeners on the target itself, and finally listeners registered for the bubbling phase run from the target back up to the root. A listener can be removed with removeEventListener using the same type, listener, and options that were used to register it.

This mechanism enables event delegation and granular control over how and when code responds to user actions and other events. See also EventTarget, dispatchEvent, and removeEventListener.