All 10 DOM & Events questions
More in DOM & Events
What does event.preventDefault() do? How do you select and modify an element's text content? What is event delegation and why is it a performance best practice? What's the difference between event.target and event.currentTarget? How do you create and dispatch a custom DOM event? What's the difference between the capturing and bubbling phases of event propagation? How do you properly clean up event listeners to avoid memory leaks? What is the difference between passive and non-passive event listeners for scroll performance? How does MutationObserver let you react to DOM changes made by other code?
Advertisement
JavaScript › DOM & Events

What is event bubbling?

Beginner

Answer

Event bubbling means an event fired on an element propagates upward through its ancestors in the DOM tree, triggering any matching event listeners on parents after the target element's own listeners run.
document.getElementById('parent').addEventListener('click', () => console.log('parent clicked'));
document.getElementById('child').addEventListener('click', () => console.log('child clicked'));
// clicking child logs 'child clicked' then 'parent clicked'
Real-world example A single click listener on a <ul> catching clicks from any <li> inside it, instead of attaching a listener to every item.

Common follow-ups: How do you stop an event from bubbling further?

Design Patterns in JavaScript
All 10 DOM & Events questions