Event Handling
This tag marks examples where the path an event travels is the substance of the answer: listener options that decide capture order, delegated handlers that survive a changing list, cleanup that runs before a node is discarded, and passive listeners that keep scrolling responsive. The grouped pages name the element the listener is bound to and the phase in which the handler executes, so the reader can predict behaviour inside a larger widget. Read the task groups to separate listeners you attach from visibility signals you subscribe to, then continue into the form and layout examples that depend on the same event objects.
This is a controlled cross-cutting tag: it groups Examples that share one facet, not a bounded topic. In scope:Include when an example's correctness depends on how an event reaches its handler. Out of scope: Exclude examples that mention an event name only while describing state changes.
6 published examples.
Handle DOM events
3 examplesAttach, configure, delegate, and remove browser event listeners correctly.
Add an event listener with the options you actually need
Pass an options object instead of a bare boolean to addEventListener: once, capture, and passive tell the browser how the listener should behave and when it should stop mattering.
Debounce a scroll handler without dropping the last call
Wrap the scroll handler in a trailing-edge timer so a burst of scroll events collapses into exactly one call that still runs for the final position instead of dropping it.
Delegate events for a list that changes after load
Bind one click listener to a stable list container and route events with closest, so rows added or removed later need no extra wiring and cleanup never falls behind the markup.
Observe element visibility
2 examplesReact to intersection, viewport entry, or document visibility changes.
Lazy-load images with IntersectionObserver
Swap a placeholder image for the real file only when the browser is about to show it, and see where the loading attribute the platform already ships is the better answer.
Reveal an element the first time it enters the viewport
Play a reveal animation the first time an element scrolls into view, then drop its observer so the effect cannot replay when the reader scrolls back up the page.
Validate form input
1 exampleDecide whether entered data is acceptable and report the result to the person filling the form.
Announce field errors without moving the caret
Report validation failures beside the field they describe, announce them politely, and leave focus where the reader typed.
Adjacent navigation
- Parent: Home
- Related topic: CSS Layout
- Related topic: DOM Events
- Related topic: Form Validation
- Or search: Search examples