Event bubbling

What this means

Event bubbling means an event starts at the clicked element and then travels upward through parent elements. A button click can be handled by the button, then by a parent card, then by a larger section.

In beginner terms, this topic answers one practical question: "What should I write, and why does React care about it?" Do not try to memorize the syntax first. First understand the idea, then connect the syntax to that idea.

Why it matters

React uses a synthetic event system that follows the same important idea. Knowing bubbling helps you understand why clicking a child can also trigger a parent handler.

When you build real React screens, this idea helps you decide where data should live, what the user should see, and what should happen after an interaction. That is why this lesson is part of the main path instead of being an optional detail.

Step by step

1. Notice the UI problem this topic solves. 2. Look at the smallest possible example. 3. Change one value and predict what should appear. 4. Run the example and compare the result with your prediction. 5. Use the practice task before moving on.

Small example

<div onClick={() => console.log("parent")}>
  <button onClick={() => console.log("child")}>Click</button>
</div>

Common mistake

Do not call stopPropagation everywhere. Use it only when a child event truly should not reach a parent.

Practice task

Create a parent box and a child button. Log different messages from each click handler and observe the order.

Remember this

Events can move from child to parent unless you stop them.