Diety Dieticheskie-produkty Protsedury Sredstva Uprajneniya Fitnes Gimnastika Yoga Pitanie Tsellyulit Zdorove Krasota

We all use JavaScript on daily basis to write events that gets triggered when someone interacts with our site and that interaction can be of any form from mouse click to keyboard’s key press and from changing value of selectbox to check / un-check checkboxes. We all love events as they provide us a convenient way to interact with DOM Elements.

Event Bubbling is an important concept in JavaScript event handling. First let’s take a look at what is event bubbling. Event bubbling is the procedure in which whenever user interacts with some element on our webpage an event occurs and that event not only occurs on that element but it bubbles up in DOM hierarchy till it reaches to the end of DOM tree.

For example, you have a div in your page and when you click on that div a series of events gets triggered. The click will occur on div element first and then it occurs to it’s parent (and the chain goes up) and finally occurs on body, html and at the end at document.

Let’s have a quick coding example to see how it actually works.

 

Image a web page with divs mentioned in above picture. When we click on  Div B first an event will gets triggered on Div B, then it bubbles upto DOM chain and then it triggers on Div A then on body, html and document. One important point here is that although event will gets triggered in DOM chain but events will gets triggered only on those elements which have attached some Event Handler code for that event. Event Handler is the code that actually gets executed when a particular event occurs on some element. This means if we have attached an event handler to Div B and document only then events will gets triggered to all elements in hierarchy but because we have attached event handlers to two elements; only those two event handlers will be executed.

 

  document.getElementById("b").onclick = function() {console.log("B is clicked");} // Attaching event handler to Div B.

  document.onclick = function() {console.log("Document is clicked");} // Attaching event handler to document.

In above code snippet we only attach Event Handler to two elements. When we click inside Div B we will see following output:-

// B is clicked
// Document is clicked
If we click outside Div B then we will see following output:-
// Document is clicked
If we attach Event Handler to Div A then we will see it’s Event Handler is getting executed as well.
But we don’t always want events to bubble up to the chain. Is there any way to stop bubbling when event gets executed on Div B? Yeah there is. To stop event bubbling we can use event.stopPropagation() inside event handler. event is the object that we can get in arguments in function attached to event. For example:-
document.getElementById("b").onclick = function(event) {console.log("B is clicked"); event.stopPropagation();} // Attaching event to div and then stopping bubbling
Now when you click inside Div B you will see following output:-
// B is clicked
This is how event bubbling works in JavaScript. Don’t be afraid of playing with it in-order to understand it completely.

Let me know if you find it helpful.

Tagged with:
 

One Response to How Event Bubbling works in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *