What is Event Delegation in JavaScript?
Learn what event delegation is in JavaScript, how it uses bubbling to handle many children with one listener, and why it works for dynamic content.
Expected Interview Answer
Event delegation is a pattern where you attach a single event listener to a common ancestor element instead of to each child, then use event bubbling to handle events from any descendant.
Because events bubble up from the target to its ancestors, one listener on a parent can catch events triggered by any child. Inside the handler you inspect event.target (often with element.closest()) to decide which child was acted upon. This is especially powerful for lists whose items are added or removed dynamically, since new children are handled automatically without wiring up new listeners.
- One listener handles many current and future children
- Works automatically for dynamically added elements
- Reduces memory use and setup code
- Simplifies cleanup — only one listener to remove
- Improves performance on large or changing lists
AI Mentor Explanation
Instead of posting a fielder to guard every single blade of grass, the captain stations one alert cover fielder who reacts to whatever ball comes into the whole region — event delegation is that one well-placed handler covering many spots rather than a body on each.
Step-by-Step Explanation
Step 1
Pick a stable ancestor
Choose a parent element that exists for the lifetime of the page and contains all the target children, such as a <ul> for its <li> items.
Step 2
Attach one listener
Call addEventListener on that ancestor for the event you care about, for example 'click'.
Step 3
Identify the real target
Inside the handler, use event.target and often event.target.closest(selector) to find the relevant child element.
Step 4
Guard against misses
If closest() returns null or the target is outside your intended set, return early so unrelated clicks are ignored.
Step 5
Act on the item
Read data attributes or the element itself to perform the action for that specific child.
What Interviewer Expects
- Understanding that delegation relies on event bubbling
- Using event.target versus event.currentTarget correctly
- Using closest() to match the intended child
- Why it handles dynamically added elements automatically
- Performance and memory benefits over per-child listeners
Common Mistakes
- Confusing event.target with event.currentTarget in the handler
- Forgetting to handle clicks on nested inner elements with closest()
- Delegating events that do not bubble, like focus or blur
- Attaching the listener to an ancestor that gets replaced
- Not returning early when the target is outside the intended set
Best Answer (HR Friendly)
“Event delegation means putting one listener on a parent element instead of many listeners on each child. Because clicks travel upward to the parent, that single listener can figure out which child was clicked and respond, which is efficient and works even for items added later.”
Code Example
const list = document.getElementById('todo-list')
list.addEventListener('click', (e) => {
const item = e.target.closest('li')
if (!item || !list.contains(item)) return
if (e.target.matches('.delete')) {
item.remove()
} else {
item.classList.toggle('done')
}
})
// Items added later are handled automatically:
function addItem(text) {
const li = document.createElement('li')
li.innerHTML = text + ' <button class="delete">x</button>'
list.appendChild(li)
}Follow-up Questions
- How does event delegation depend on event bubbling?
- Why is event.target.closest() commonly used inside a delegated handler?
- How would you delegate events that do not bubble?
- What is the difference between event.target and event.currentTarget?
- When might per-element listeners be preferable to delegation?
MCQ Practice
1. Event delegation primarily relies on which DOM behaviour?
Delegation works because events bubble from the target up to the ancestor holding the single listener.
2. Inside a delegated handler, which property identifies the element that was actually clicked?
event.target is the element that originated the event; event.currentTarget is the ancestor the listener is attached to.
3. A key advantage of event delegation is that it:
Because the single ancestor listener catches bubbled events, children added later are handled without new listeners.
Flash Cards
What is event delegation? — Attaching one listener to a common ancestor and using bubbling to handle events from any descendant.
Why use closest() in a delegated handler? — To map the clicked element (possibly a nested child) up to the intended matching element.
target vs currentTarget? — target is where the event originated; currentTarget is the element the listener is bound to.
Main benefit of delegation? — One listener covers many children, including ones added dynamically, saving memory and setup.