Event Bubbling vs Event Capturing
Event bubbling and capturing are key phases in the DOM event propagation model.
Wiki topics:
🌐 · Web Development
Event Bubbling vs Event Capturing
Event bubbling and capturing are key phases in the DOM event propagation model.
Event Bubbling
Bubbling travels upward from the target element to the document root, serving as the default phase. Below image shows the path of travesal followed by a coding example.
<!DOCTYPE html>
<html>
<head>
<style>
.grandparent {
padding: 30px;
background-color: #f0f8ff;
border: 3px solid blue;
margin: 10px;
}
.parent {
padding: 20px;
background-color: #e6ffe6;
border: 2px solid green;
margin: 10px;
}
.child {
padding: 15px;
background-color: #ffe6e6;
border: 1px solid red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="grandparent" class="grandparent">
Grandparent Div
<div id="parent" class="parent">
Parent Div
<div id="child" class="child">
Click Me (Child)
</div>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');
grandparent.addEventListener('click', (e) => {
console.log('Grandparent clicked!');
});
parent.addEventListener('click', (e) => {
console.log('Parent clicked!');
});
child.addEventListener('click', (e) => {
console.log('Child clicked!');
});
</script>
</body>
</html>Event Capturing
Capturing travels downward from the document root to the target element. Below image shows the path of travesal followed by a coding example.
<!DOCTYPE html>
<html>
<head>
<style>
.grandparent {
padding: 30px;
background-color: #f0f8ff;
border: 3px solid blue;
margin: 10px;
}
.parent {
padding: 20px;
background-color: #e6ffe6;
border: 2px solid green;
margin: 10px;
}
.child {
padding: 15px;
background-color: #ffe6e6;
border: 1px solid red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="grandparent" class="grandparent">
Grandparent Div
<div id="parent" class="parent">
Parent Div
<div id="child" class="child">
Click Me (Child)
</div>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');
grandparent.addEventListener('click', (e) => {
console.log('Grandparent captured!');
}, true);
parent.addEventListener('click', (e) => {
console.log('Parent captured!');
}, true);
child.addEventListener('click', (e) => {
console.log('Child captured!');
}, true);
</script>
</body>
</html>메타데이터
- post_id
- 8d1ba0d32ee5
- slug
- event-bubbling-vs-event-capturing-8d1ba0d32ee5
- url
- https://medium.com/@saifmd993/event-bubbling-vs-event-capturing-8d1ba0d32ee5
- canonical_url
- https://medium.com/@saifmd993/event-bubbling-vs-event-capturing-8d1ba0d32ee5
- author_url
- https://medium.com/@saifmd993
- status
- ok
- fetched_at
- 2026-07-29 19:32:09
