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.