Event bubbling & capturing in Javascript.
Event bubbling : The event starts at the target element and propagates (bubbles) upward through its ancestors in the DOM hierarchy.
Event Capturing : The event starts from the root element and propagates downward to the target element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubbling and Capturing</title>
<style>
#parent {
padding: 50px;
border: 1px solid black;
}
#child {
margin-top: 20px;
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="parent">
Parent
<div id="child">
Child
</div>
</div>
<script>
// Wait until the DOM is fully loaded
document.addEventListener("DOMContentLoaded", () => {
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Event listener for parent (capturing phase)
parent.addEventListener("click",(event) => {
console.log("Parent capturing");
},true);
// Event listener for parent (bubbling phase)
parent.addEventListener("click", () => {
console.log("Parent bubbling");
});
// Event listener for child
child.addEventListener("click", (event) => {
console.log("Child clicked");
event.stopPropagation(); // Stops event from propagating further
});
});
</script>
</body>
</html>
Posts
No comments:
Post a Comment