Event Bubbling

I thought of a very cheeky analogy…. imagine someone slaps you hard on the cheek, the pain doesn’t just stay there, it spreads across your face and even rings in your ears, and often gives you a headache... Trust me, I’ve received that kind of slap before, from my mom. The sole purpose was to properly reset my brain. 😮‍💨

That’s event bubbling: the event starts at one element and propagates outward through its parent elements.
When working with events in React, you might have noticed that sometimes multiple event handlers get triggered 🤷‍♀️, even when you only clicked one element. Well, That&apso;s due to something called event bubbling, a behavior inherited from how the browser handles events.

🧨What is Event Bubbling?

In the browser, when you click an element, the event doesn&apso;t stop there. It starts from the innermost element and travels up through its parent elements, this is called bubbling.
it is quite similar to ripples in a pond, the disturbance starts at one point and then spreads outward to everything around it.💦🌊

<𝙙𝙞𝙫 𝙤𝙣𝘾𝙡𝙞𝙘𝙠={() => 𝙘𝙤𝙣𝙨𝙤𝙡𝙚.𝙡𝙤𝙜("𝘿𝙞𝙫 𝙘𝙡𝙞𝙘𝙠𝙚𝙙")>
 <𝙗𝙪𝙩𝙩𝙤𝙣 𝙤𝙣𝘾𝙡𝙞𝙘𝙠={() => 𝙘𝙤𝙣𝙨𝙤𝙡𝙚.𝙡𝙤𝙜("𝘽𝙪𝙩𝙩𝙤𝙣 𝙘𝙡𝙞𝙘𝙠𝙚𝙙")}>𝘾𝙡𝙞𝙘𝙠 𝙢𝙚</𝙗𝙪𝙩𝙩𝙤𝙣> 
</𝙙𝙞𝙫>

This happens Because the event bubbles up from the button to its parent div, clicking a child element can trigger the parent's event too. 🧨How to Stop Event Bubbling When you don't want the event to reach the parent. In that case, use:

𝙤𝙣𝘾𝙡𝙞𝙘𝙠={(𝙚) => { 𝙚.𝙨𝙩𝙤𝙥𝙋𝙧𝙤𝙥𝙖𝙜𝙖𝙩𝙞𝙤𝙣(); 𝙘𝙤𝙣𝙨𝙤𝙡𝙚.𝙡𝙤𝙜("𝘽𝙪𝙩𝙩𝙤𝙣 𝙘𝙡𝙞𝙘𝙠𝙚𝙙 𝙤𝙣𝙡𝙮"); }}

Now, clicking the button won't trigger the parent's onClick handler. In an attempt to keep my writing short I'll just give a summary of the benefit of event bubbling:

🧨Event bubbling helps you write less code: you can use one one event listener to trigger multiple events

I hope this was as fun to read as it was to write 🥸