JavaScript Bubbling – Stop bubbling using event.stopPropagation() method

When event happens on an element, It first run the handler of it, After that it will run the handler of it’s all parent element.

Example:

Let’s create the 3 div inside the each other div elements. DIV > DIV > DIV.

By default, JavaScript enable the bubbling, So whenever “Child Element” is click so it’s handler will be called. After that it’s parent element handler will be called respectively “Parent 1” & “Parent 2” element.

HTML :

<div id="Parent2">
        Parent 2
        <div id="Parent1">
                Parent 1
                <div id="ChildElement">
                        Child Element
                </div>
        </div>
</div>

JS:

var ChildElement = document.getElementById("ChildElement");
var Parent1 = document.getElementById("Parent1");
var Parent2 = document.getElementById("Parent2");

ChildElement.onclick = function (event) {
    alert("Child Element");
};

Parent1.onclick = function (event) {
    alert("Parent 1");
};

Parent2.onclick = function (event) {
    alert("Parent 2");
};

Bubbling1 Demo

event.target and event.currentTarget

So each and every handler will got the event object and that object have the details about where it actually happens.

So parent element has the details about the the where it actually happens.

The most deeply nested element that caused the event is called the target element, accessible as event.target.

event.target is the target element that caused the event, and the event.target does not change through the whole bubbling process.

So the “Parent 1” & “Parent 2” element always know the this event is caused by the “Child Element”.

this is the event.currentTarget which is currently running. this only provides the details of the current running element.

JS:

var ChildElement = document.getElementById("ChildElement");
var Parent1 = document.getElementById("Parent1");
var Parent2 = document.getElementById("Parent2");

ChildElement.onclick = function (event) {
    var targetID = event.target.id; // ChildElement
    var currentTargetID = event.currentTarget.id; // ChildElement
    alert("target = " + targetID + "\n" + " current = " + currentTargetID);
};

Parent1.onclick = function (event) {
    var targetID = event.target.id; // ChildElement
    var currentTargetID = event.currentTarget.id; // Parent1
    alert("target = " + targetID + "\n" + " current = " + currentTargetID);
};

Parent2.onclick = function (event) {
    var targetID = event.target.id; // ChildElement
    var currentTargetID = event.currentTarget.id; // Parent2
    alert("target = " + targetID + "\n" + " current = " + currentTargetID);
};

Bubbling Demo

Stop Bubbling

We can also able to stop the bubbling.

It means we can stop the parent element handler to execute on the event caused by the it’s child element.

So for the stop bubbling we can call the event.stopPropagation() method of the event object.

So after calling the event.stopPropagation() method inside the “Child Element” handler, it’s parent element handler will be not called. So the “Parent1” & “Parent2” element’s handler will be not called.

JS:

var ChildElement = document.getElementById("ChildElement");
var Parent1 = document.getElementById("Parent1");
var Parent2 = document.getElementById("Parent2");

ChildElement.onclick = function (event) {
    event.stopPropagation();
        // Now the handler for the Parent1 and Parent2 will be not called.
    alert("Child Element");
};

Parent1.onclick = function (event) {
    alert("Parent1");
};

Parent2.onclick = function (event) {
    alert("Parent2");
};

Stop Bubbling Demo

In above example I called the event.stopPropagation() method inside the ChildElement handler So the handler of the Parent1 and Parent2 element will be not called.