Event Delegation in JavaScript

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.

Download our iOS app

Why Use Event Delegation?

Join our newsletter

1. 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:

1. 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).
2. The parent “catches” the event and checks: “Which child was clicked?” using the event’s targetproperty.

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!

Join our newsletter