Event Bubbling & Delegation
Definition
Event bubbling is the phase where an event triggers on the deepest target element and then successively triggers on its ancestors. Event delegation is a pattern that takes advantage of bubbling by attaching a single event listener to a parent element to manage events for all of its children.
Explain Like I'm New
Imagine a classroom full of students. Instead of the teacher handing a specific instruction sheet to all 30 students individually (attaching 30 event listeners), the teacher just pins one instruction sheet to the classroom whiteboard (the parent element). When a student needs it, they just look at the board. This is event delegation.
Real World Example
If you have a shopping cart with 50 'Remove Item' buttons, attaching an event listener to each button takes up a lot of memory. It's much smarter to attach ONE listener to the entire shopping cart container, and check if the thing clicked was a 'Remove' button.
Common Use Cases
- •Handling events for a large number of child elements (like lists or tables)
- •Handling events for elements that are added dynamically to the page after the initial load
- •Improving performance and saving memory
Interactive Example
Interview Questions
basic
- What is event bubbling?
- What is event delegation?
intermediate
- What is the difference between event.target and event.currentTarget?
- How do you stop an event from bubbling up?
advanced
- What is Event Capturing (or Trickling) and how does it relate to Bubbling?
- What is the difference between stopPropagation() and stopImmediatePropagation()?
trick
- Do all events bubble in JavaScript?