Event Delegation & Bubbling
Discover how events travel up the DOM tree and how to use this behavior to efficiently handle events on many elements with a single listener.
Event bubbling: events travel upward
When you click a `<button>` inside a `<div>` inside the `<body>`, the click event doesn't just fire on the button. It **bubbles up** through every ancestor: button -> div -> body -> html -> document. Every ancestor has a chance to hear the event.
This is called **event bubbling** and it's built into how browsers work. It's not a bug — it's a feature that enables a powerful pattern called event delegation.
You can see this in action: if you add a click listener to the `<body>`, it will fire when you click anything on the page — because every click eventually bubbles up to the body.
Most events bubble, but a few don't — `focus`, `blur`, `mouseenter`, and `mouseleave` are notable exceptions. Use `focusin`/`focusout` if you need bubbling versions of focus/blur. You can check if an event bubbles by reading `event.bubbles`.