Event Propagation with jQuery

In this lesson, we are going to discuss Bubbling / Event Propagation Continuing from our previous Event Deligation lesson. 

This time I'm going to select the second anchor tag which is named bubbling in our HTML document. I'm going to write a.bubbling and on click it should run a function and make the text bold

$(document).ready(function(){
   $('a.bubbling').on('click', function(){
   $(this).css('font-weight', 'bold'); 
})
});

Save it, refresh the screen and you will see the text is now bold if I click on it

I'm going to write another event handler, and this time I'm going to attach the click handler to the div with a class of main-class element and change the background color to black and the font color to white like such

$(document).ready(function(){
   $('.main-class').on('click', function(){
   $(this).css({
     'background-color': 'black'),
      'color': 'white'
     })
   })
});

Save it, refresh the screen and now if I click on the background area, any part of the main content the background color is going to change to black and the color of text will be white as shown below

Another thing I want to show is that if you refresh the page and now you click on the Bubbling / Event Propagation the link will be bold and the background color will be changed to black. Save it, refresh the screen and you see, even though I clicked on the second link but the background color also changed.

You just learned the concept of the DOM, The Document Object Model. When you click on any of the child element, it takes the effect whatever its parent has. So in our case the second link is the child of the div element with a class of content which is inside the div element with a class of main-class as shown below

If you want to prevent it, you can write the function called e.stopPropagation like such 

$(document).ready(function(){
   $('a.bubbling').on('click', function(e){
   $(this).css('font-weight', 'bold'); 
   e.stopPropagation();
})
});

Save it, refresh the screen and now if you click on the second link, it will become bold but the background and the rest will remain the same as shown below

You notice we wrote e in the brackets and also wrote e.stopPropagation. I'm going to console.log(e) to see what this e is.

If I click on the first link, the propagation will take place because there's no stopPropagation in the first event handler.  



I hope you enjoyed this lesson, if you have any question, leave your comments below. I'll talk to you in the next lesson. Good bye :)