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.
When you click a `` inside a `` inside the ``, 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 ``, it will fire when you click anything on the page — because every click eventually bubbles up to the body.Think of it this way: Event bubbling is like shouting in a building. If you shout in a room (child element), people in the hallway (parent) and lobby (grandparent) can hear it too. The shout travels outward from where it started, reaching every container along the way.Web StandardMost 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`.Learn more on MDNEvent bubbling
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 `
