Difference between stopPropagation vs stopImmediatePropagation in JavaScript
Last Updated :
23 Jan, 2022
An event propagates or bubbles till the window object-level every time a registered event is called. For example, Let us consider a parent div element (“Div Parent”) that contains another child div element (“Div child”), and for both, a click event is registered. If child div is clicked, the event will be fired at all places i.e, at both parent and child objects.
StopPropagation() event method: Prevents propagation of any handlers at top-level DOM hierarchy to execute. It stops the click event from bubbling to the parent elements.
Example: In this method, after clicking the <div> element 1st event handler will occur after that nothing will happen. If you click the <p> element then the 2nd and 1st event handler will occur because <p> element is inside of <div> element but if you click <span> element only the 3rd event handler will occur, cause StopPropagation() event method stops the event from bubbling to the parent elements.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script >
$(document).ready(function() {
$("span").click(function(event) {
event.stopPropagation();
alert("The span element was clicked.");
});
$("p").click(function(event) {
alert("The p element was clicked.");
});
$("div").click(function() {
alert("The div element was clicked.");
});
});
</ script >
< style >
div {
height: 120px;
width: 300px;
padding: 10px;
margin: 50px;
border: 2px solid black;
background-color: purple;
}
p {
background-color: orange;
}
span {
background-color: cyan;
}
</ style >
</ head >
< body >
< center >
< div >
< h1 style = "color:lightgreen;" >
GeeskforGeeks
</ h1 >
< p >
Acomputer Science Portal for Geeks< br >
< span >Click on this span element.</ span >
</ p >
</ div >
< p >
event.stopPropagation() stops the click event
from bubbling to the parent elements.
</ p >
</ center >
</ body >
</ html >
|
Output:
- Before Clicking the element:
- After Clicking the <div> element:
- After Clicking the <p> element:
- After Clicking the <span> element:
StopImmediatePropagation() event method: Prevents both propagation of any other handlers and those at top level DOM hierarchy. It stops the other events which were assigned after this event.
Example: The StopImmediatePropagation() event stops the next event.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script >
$(document).ready(function() {
$("div").click(function(event) {
alert("'Event handler 1' executed");
event.stopImmediatePropagation();
});
$("div").click(function(event) {
alert("'Event handler 2' executed");
});
$("div").click(function(event) {
alert("'Event handler 3' executed");
});
});
</ script >
< style >
div {
height: 100px;
width: 300px;
padding: 10px;
margin: 50px;
border: 2px solid black;
background-color: purple;
}
</ style >
</ head >
< body >
< center >
< div >
< h1 style = "color:lightgreen;" >
GeeskforGeeks
</ h1 >
Click on this div element.
</ div >
< p >
event.stopImmediatePropagation() stop
the second and third event.
</ p >
</ center >
</ body >
</ html >
|
Output:
- Before Clicking the div element:
- After clicking the div element:
stopPropagation vs stopImmediatePropagation
stopPropagation |
stopImmediatePropagation |
It will allow other handlers on the same element to be executed, prevent handlers on parent elements from running. |
It will prevents every event from running. |
It will allow more than one handler to be executed one by one. |
It will depend on you where you used this, that handler will be the last one to be executed. |
If you create a table containing <table>, <tr> and <td>. If you set three event handler for <td> then other two event handler will also run with this one. |
But in this case if you do the same things the other two event handlers won’t run. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...