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
When you click on
element2, it also cause a click event on
element1. And that is because of event bubbling and event capturing.
In event bubbling, the event handler propagates to the outer DOM(Document Object Model).
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
1 2 3 4
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
The scripts simply means that by clicking the
tr element, the propagation stops on the
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!