π§ The easiest way to understand Bubbling in JavaScript:π§΅:
π» Real-world scenario:
- When we throw a stone in the river, have you observed there?
- It pushes the water out of the way, making a ripple that moves away from where the stone landed.
Right?
- When we throw a stone in the river, have you observed there?
- It pushes the water out of the way, making a ripple that moves away from where the stone landed.
Right?
π» What is bubbling in JS?
- Similarly in JavaScript, When an event happens on an element, it first runs the handlers function on it, and then it grows like water ripples till the "document" object in JavaScript.
- Similarly in JavaScript, When an event happens on an element, it first runs the handlers function on it, and then it grows like water ripples till the "document" object in JavaScript.
- In other words, When an event happens on an element, it first runs the event handler function for that element, and then it goes to the parent element(till the "document" object).
- Suppose, we have 3 nested elements.
- Suppose, we have 3 nested elements.
Now I am going to listen to events on each of the elements.
If I click on the "p" elements then:
1. The alert() of the p element will be executed.
2. And alert of the div element.
3. Also alert of the section element will be executed.
P β div β section (till "document" obj)
If I click on the "p" elements then:
1. The alert() of the p element will be executed.
2. And alert of the div element.
3. Also alert of the section element will be executed.
P β div β section (till "document" obj)
- This type of process is called "bubbling" in JavaScript because the events bubble(ripple) from the inner element to the parent element.
Just like a water ripple:)
Try it from here:
codepen.io
Just like a water ripple:)
Try it from here:
codepen.io
That's all for now, we will meet in the next threadπ
π Follow Me @ATechAjay
For:
π Web Development
β¨ JavaScript
βοΈ React JS
π Writing Skill
π₯ Motivation
πΉ Growth
β But Not For Only Resources & Shitpost π
Thank you so much for staying to the end of this threadπ
π Follow Me @ATechAjay
For:
π Web Development
β¨ JavaScript
βοΈ React JS
π Writing Skill
π₯ Motivation
πΉ Growth
β But Not For Only Resources & Shitpost π
Thank you so much for staying to the end of this threadπ
Loading suggestions...