Explain the three phases of event propagation, then use delegation to handle clicks on a list with one listener. Click the items in the preview.
Whether you understand the propagation model and can exploit it for delegation.
A DOM event travels in three phases: (1) CAPTURING — from the window down through ancestors to the target; (2) TARGET — it reaches the element clicked; (3) BUBBLING — it travels back up through ancestors to the window. addEventListener listens in the bubbling phase by default; pass { capture: true } (or a third arg true) to listen while capturing. event.stopPropagation() halts further travel; event.stopImmediatePropagation() also skips other listeners on the same node; event.preventDefault() cancels the browser's default action (following a link, submitting a form) but does NOT stop propagation — they're independent. EVENT DELEGATION exploits bubbling: instead of binding a listener to every child, bind ONE listener on a common ancestor and inspect event.target (often with .closest(selector)) to find which descendant was hit. Benefits: far fewer listeners (less memory), and it automatically covers elements added to the DOM LATER — a big win for dynamic lists. Caveat: some events don't bubble (focus, blur, scroll on most elements) — use their capturing variants (focusin/focusout) or the capture phase. event.currentTarget is the node the listener is attached to; event.target is where it originated.
Lists, tables, menus, and any dynamically-added elements: one delegated listener beats N per-item listeners.