Javascript Event Bubbling and Event Capturing

Junerey Casuga in bubbling, javascript, jquery

You might be surprised when you fire an onClick event on an element, something happens to another element with the same event. Let’s site a clearer example. Suppose you have an element inside an element with the same event handler which is onClick.

When you click on element2, it also cause a click event on element1. And that is because of event bubbling and event capturing.

Event Bubbling

In event bubbling, the event handler propagates to the outer DOM(Document Object Model).

Event Capturing

In event capturing, the event handler propagates to the inner DOM.

How to stop Event Bubbling?

Event bubbling is always happening when you trigger an event. But there is also a way to stop it. I know that you also don’t want event bubbling cause an interference with each element on your DOM. So how can we stop event bubbling? You can stop it by using the stopPropagation() method.

1
2
3
4
$('p').click(function(e){
  e.stopPropagation();
  // do something
});

This method allows you to stop the propagation of an event caused by event bubbling. You can also use the .on() function of jQuery to stop the propagation of the event.

1
2
3
$('tbody').on('click', 'tr', function(e){
  // do something
});

The scripts simply means that by clicking the tr element, the propagation stops on the tbody element.

That’s it for this article. I hope you learned from this. Especially for those who are entering to the front-end development world. Cheers!