
Imagine you’re the principal of a large school. Every day, students (like buttons, links, or images on a webpage) send you notes (like “clicks” or “taps”). If you tried to handle every student’s note personally, you’d be overwhelmed. Instead, you assign one teacher per class (more like a parent container) to collect notes from their students. When a note arrives, the teacher tells you, “Someone in Class 3B sent this.” You then check who it’s from and act accordingly.
This is event delegation in JavaScript!
Event delegation is a technique in JavaScript where you assign a single event listener to a parent element (like a container, list, or table) to manage interactions with multiple child elements inside it, instead of attaching listeners to each child individually.
Why Use Event Delegation?
- Efficiency:
- Without delegation, every student (element) needs their own “mailbox” (event listener). If you have 100 buttons, you’d set up 100 listeners!
- With delegation, one parent (e.g., a
<div>
wrapping all buttons) handles everything. Fewer listeners = better performance.
2. Flexibility:
- New students? If you add buttons dynamically (e.g., loading more content), they’re automatically covered by the parent’s listener. No extra setup!
3. Simplicity:
- Cleaner code! You write one rule instead of repeating the same logic everywhere.
How It Works: The “Bubbling” Effect
When you click a button:
- The click “bubbles up” from the button → to its parent → to the grandparent → all the way to the top (like a bubble rising in water).
- The parent “catches” the event and checks: “Which child was clicked?” using the event’s
target
property.
Example
Imagine we want to have a to-do list where clicking on any task marks it as complete. We can do it without delegation or we can do it with delegation.
//Without Delegation (Messy)
// Add a listener to EVERY task (inefficient!)
document.querySelector("#task-1").addEventListener("click", markComplete);
document.querySelector("#task-2").addEventListener("click", markComplete);
// ...and so on for 100 tasks 😅
//With Delegation// ONE listener on the parent <ul>:
document.querySelector("#todo-list").addEventListener("click", function(event) {
// Check if a task (<li>) was clicked:
if (event.target.tagName === "LI") {
event.target.classList.add("complete"); // Mark it done!
}
});
What Changed?
- New tasks added later? They’re automatically covered.
- No need to update listeners when the list changes.
What You Should Do
- Delegate to survive scale: One parent listener > 100 child listeners.
- Events bubble up: Use
event.target
to identify the clicked element. - Dynamic content friendly: Perfect for modern apps that load content on the fly!

Latest tech news and coding tips.