Understanding Event Bubbling and Stop Propagation

🫧 Event Bubbling:

When you click on an element inside another element, like clicking on a button within a div, the click event doesn't just trigger on the button; it also "bubbles up" through its parent elements. So, the button's click event fires first, then its parent's click event, and so on up the DOM tree 🌳. This process is called event bubbling.

---

• Issue:

Without stopPropagation(), clicking the child element would trigger both the child and the parent event handlers.

🎥 Problem

See the code in branch: problem

problem-clickable-child.mp4

---

• Solution:

stopPropagation() 🚫: Now, when you click the child element, the parent's click event won't be triggered anymore

🎥 Solution

See the code in branch: solution

solution-clickable-child.mp4