Events
An event is the browser telling your code that something happened: a click, a key press, a form being sent. Follow one click on a to-do list: the browser makes an event object, carries it down the DOM tree to the button and back up, and the single listener on the list runs, finds the clicked row and crosses it out. Then a second click shows why one listener on a parent can serve every child: event delegation.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01When does the function passed to list.addEventListener("click", ...) run?
addEventListener only saves the function. The browser calls it later, once for every click event that reaches the list.
02You click the Done button inside a row. The only listener is on the <ul>. What are event.target and event.currentTarget inside it?
target is where the event happened (the button) and never changes during the trip. currentTarget is the element whose listener is running: the list.
03In what order does a click on the button travel, if listeners use the default options?
Dispatch goes down (capture), reaches the target, then bubbles up. A listener added without { capture: true } runs at its target or on the way up.
04Why does ONE listener on the list handle clicks on every row, even rows added later?
A click bubbles from the button through the row to the list, so the list's listener hears it. That is event delegation.
05What does event.target.closest("li") return when you click a Done button?
closest checks the element itself, then each parent in turn, and returns the first match, here the row that holds the button.
Glossary
- Event
- A signal that something happened on the page, such as a click, a key press or a form being sent.
- Listener
- A function registered with addEventListener that the browser calls when a matching event reaches the element.
- Event object
- The object the browser passes to a listener, describing the event: its type, target, currentTarget and more.
- event.target
- The element the event happened on. It stays the same for the whole trip.
- event.currentTarget
- The element whose listener is running right now. It is null outside a listener.
- Capture phase
- The first part of an event's trip, from the top of the DOM tree down to the target.
- Bubbling
- The last part of the trip, from the target back up through its ancestors. Most events, including click, bubble.
- Event delegation
- Handling events for many child elements with one listener on their parent, using bubbling and event.target.
Notes and sources
- The real path is longer: window, document, html, body, ul, li, button. The figure leaves out window, html and body; they have no listeners here, so nothing changes.
- Between the two phases the event is at the target itself (eventPhase 2). Listeners on the button would run then. The button has none here.
- addEventListener(type, fn, { capture: true }) makes a listener run on the way down instead. Most listeners use the default, the bubble phase.
- event.stopPropagation() stops the trip at the current element, so parents further up never hear the event. event.preventDefault() is different: it cancels the browser's own action, such as following a link or sending a form.
- Most events bubble, including click, keydown and input. A few do not, such as focus and blur; their bubbling versions are focusin and focusout.
- Both files are real. Save them side by side and open todo.html: each Done click crosses its row out, a second click brings it back, and the console prints BUTTON.
Quiz Unlocks after the last step.