Glossary · Beginner
Event listener
An event listener is a callback registered on an EventTarget to respond when a named browser, user, or application event is dispatched.
- Published
- Last checked
Definition
An event listener is a callback registered for an event type on an object that
implements EventTarget, such as an element, document, window, or abort signal.
When the event is dispatched through its path, matching listeners can observe
and respond during capture or bubble phases.
Registration
addEventListener() accepts an event type, callback, and options such as
capture, once, passive, or signal. Removing a listener requires the same
callback and compatible capture setting, unless an AbortSignal owns its
lifetime. Anonymous callbacks are convenient but harder to remove deliberately.
Behavior boundary
A listener adds behavior; it does not change an element's semantics. A click
listener on a div does not create a button. Begin with the correct native
element so pointer, keyboard, focus, naming, disabled state, and default actions
already have a browser contract.
Review question
Which target owns the listener, how long should it live, which event types and input methods reach it, and does it cancel a useful default? Test repeated initialization, removal, nested targets, keyboard activation, touch, and aborted work. Confirm one user action does not accumulate duplicate callbacks or report success before the authoritative operation completes.
Also check error paths. A listener that begins asynchronous work should expose a pending state, handle rejection, and stop updating an element after its owning view is removed. Cleanup is part of the interaction contract, not an optional performance refinement.