How does event bubbling and delegation work?

When an event fires, the browser first walks down from the window to the target during capture, then runs listeners on the target, then walks back up during bubbling. Most listeners are registered for the bubble phase by default.

document.querySelector("#list").addEventListener("click", (event) => {
  const button = event.target.closest("button[data-id]");
  if (!button) return;

  console.log("clicked", button.dataset.id);
});

The methods you need

• event.target is the element that fired the event
• event.currentTarget is the element whose listener is running
• stopPropagation() prevents the event from continuing to other elements
• preventDefault() cancels the browser's default action, such as a link navigation
• { capture: true } registers a listener for the capture phase

Delegation is valuable for lists that change frequently. Instead of attaching and removing listeners for every row, attach one listener to the container and inspect the target. It also reduces memory usage and avoids leaks from forgotten listeners.

element.addEventListener("scroll", onScroll, { passive: true });