Event Bubbling and Capturing
We manipulate the html page from the JS using the DOM, where dom makes us available different varities of eventing mechanisms, that are important in JS.
The syntax of an Event in JS is like this
<button>.addEventListener('<eventName>', () => {
}, {caputre: boolean})
This is how an event goes in and the capture boolean tag is how we determine wheater we want the event to propogate or not.
What is event propogation?
Event propogation is a phenomenon where if we click an object which is inside the a parent element the clicking of child object creates event propogation to the parent object aswell.
Upon clicking the child we have parent and grandParent outer dives also gotten clicked.
<script>
const grandParent = document.getElementById("grandparent");
const parent = document.getElementById("parent");
const child = document.getElementById("child");
grandParent.addEventListener("click", (e) => {
console.log("GrandParent");
}, { capture: false });
parent.addEventListener("click", (e) => {
console.log("Parent");
}, { capture: false });
child.addEventListener("click", (e) => {
console.log("Child");
}, { capture: false });
</script>
But we don’t want that to happend, the event is passed on from child to parent elements, hence its called event bubbeling of the event.
Event Capturing
In the below example we have changed the value of capture to false then what we find is called as event capturing, the ancestor divs of the child div were printing first and then the child divs.
<script>
const grandParent = document.getElementById("grandparent");
const parent = document.getElementById("parent");
const child = document.getElementById("child");
grandParent.addEventListener("click", (e) => {
console.log("GrandParent");
}, { capture: false });
parent.addEventListener("click", (e) => {
console.log("Parent");
}, { capture: false });
child.addEventListener("click", (e) => {
console.log("Child");
}, { capture: false });
</script>
| Event Bubbling | Event Capturing |
| The event bubbling occurs when the child element passes its event type of the parent | The event bubbling occurs when the parent element passes its event type of the child |
| Direction: The event flows from target element to its parent elements, and then to the root | Direction: The events flow from parent element to tits children elements. |
| child.addEventListener("click", (e) => { console.log("Child"); }, { capture: true}); | child.addEventListener("click", (e) => { console.log("Child"); }, { capture: false }); |
Can we even stop the event bubbeling?
Yes we can stop the propogation or bubbeling by using a simple e.stopPropagation to prevent the event to go further.
<script>
const grandParent = document.getElementById("grandparent");
const parent = document.getElementById("parent");
const child = document.getElementById("child");
grandParent.addEventListener("click", (e) => {
console.log("GrandParent bubbling");
});
parent.addEventListener("click", (e) => {
e.stopPropagation(); //syntax to stop event bubbling
console.log("Parent bubbling");
});
child.addEventListener("click", (e) => {
console.log("Child bubbling");
});
</script>