Event Propagation and Bubbling
In this page:
Bubbling
An event fired on a child element travels upward through its ancestor elements unless something stops it -- this upward travel is called bubbling.
Example: Bubbling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="outer"><button id="inner">Click</button></div>
<script>
$("#outer").on("click", function() { console.log("Outer handler ran"); });
$("#inner").on("click", function() { console.log("Inner handler ran"); });
</script>
</body>
</html>Stop Propagation
Calling event.stopPropagation() inside a handler stops the event from continuing upward, so any handlers attached to parent elements for that same event never run.
Example: Stop Propagation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="outer"><button id="inner">Click</button></div>
<script>
$("#outer").on("click", function() { console.log("Outer handler ran"); });
$("#inner").on("click", function(event) {
event.stopPropagation();
console.log("Inner handler ran, stopped bubbling");
});
</script>
</body>
</html>Parent and Child
Because of bubbling, both a child element's own handler and any handler on its ancestors can respond to the same single click, running in order from the innermost element outward.
Example: Parent and Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card"><button id="btn">Click</button></div>
<script>
$("#btn").on("click", function() { console.log("1: button handler"); });
$("#card").on("click", function() { console.log("2: card handler"); });
</script>
</body>
</html>Prevent Bubbling
stopPropagation() is the tool to reach for specifically when a child element's own action -- like a button inside a clickable card -- shouldn't also trigger whatever the card's own click handler does.
Example: Prevent Bubbling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card <button id="btn">Delete</button></div>
<script>
$("#card").on("click", function() { console.log("Card clicked"); });
$("#btn").on("click", function(event) {
event.stopPropagation();
console.log("Button deleted, card click suppressed");
});
</script>
</body>
</html>Delegated Events
Event delegation deliberately relies on bubbling rather than fighting it: instead of attaching a handler to every child, you attach one handler to a shared parent and use the bubbled event's target to figure out which child was actually interacted with.
Example: Delegated Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").on("click", "li", function(event) {
console.log("Clicked:", event.target.textContent);
});
</script>
</body>
</html>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: