An APIs series

Events

Nothing in a browser runs because you asked nicely. Code runs because something happened — a click, a keypress, a form submission, a timer firing, a page finishing its load — and you arranged to be told about it. That arrangement is the event model, and it is the single piece of machinery every interactive page sits on. This series covers it before the DOM series on purpose: you can use events without ever touching the tree, but you cannot demonstrate the tree without events to drive the demos.

The thesis

The event model is an inversion of control. You do not call the browser; the browser calls you. Everything else in this series is a detail of that arrangement: how you register interest (three ways, only one of which you should use), what you are handed when the call comes (the event object), which order listeners fire in when an event travels the tree (capture, target, bubble), and what that travel buys you (delegation — one listener doing the work of hundreds). Once those are solid, the model generalizes: you can mint your own event types, and you can throttle the firehose events that arrive faster than you can act on them.

Who this is for

Students who know JavaScript fundamentals — functions, objects, and enough of the language to read a callback without flinching. Only light HTML knowledge is assumed; where a demo touches the document tree it uses the smallest possible piece of it, and the DOM series that follows repays the favor by leaning on events throughout.

How the demos work

Every demo runs in its own frame as a real, complete HTML file you can open on its own and edit. Each is a small lab: buttons to press, fields to type in, and a log panel (a live region, so screen readers announce it too) showing exactly which events fired and in what order. Nothing is minified or bundled — view source is the second half of every demo.

The seven steps

  1. 01Hello, events

    The three ways to bind a handler — inline attribute, element property, and addEventListener — why they all still work, and why only the last one scales.

  2. 02The event object

    What the browser hands your handler: type, target, coordinates, keys, modifiers, and preventDefault(). Includes an event watcher you can point at anything.

  3. 03Event flow

    Capture down, target, bubble up. Where listeners sit in that journey, and what stopPropagation() actually stops.

  4. 04Event delegation

    The payoff of bubbling: one listener on a container handling events for every child it will ever have, via target.closest() and data-action.

  5. 05Forms: events that do work

    submit, input, and change; reading fields by hand versus letting FormData do it. Applied: a temperature converter and a datalist autocomplete.

  6. 06Custom events

    Minting your own event types with CustomEvent and detail — namespaced names, a single router, and components that announce themselves instead of being polled.

  7. 07Taming the storm

    scroll, pointermove, and resize fire faster than you can respond. Throttling, debouncing, and passive listeners keep the page ahead of the firehose.