Event Delegation in JavaScript

Introduction

In this article, you will learn the concept of Event Delegation.

Event Delegation is used to improve performance and reduce memory usage.

What is Event Delegation?

Event Delegation is a technique where you attach a single event listener to a parent element instead of adding listeners to multiple child elements.

Note: It works because of event bubbling.

Why Do We Need Event Delegation?

Suppose you have 50 list item (li).

❌ Without Event Delegation:

const items = document.querySelectorAll("li");
items.forEach(function(item) {
  item.addEventListener("click", function() {
    console.log("Item clicked");
  });
});

Note: This creates 50 event listeners, and it is bad for performance in large applications.

✅ With Event Delegation:

document.getElementById("list").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Item clicked");
  }
});

Note: Now you have only one event listener.

How Event Delegation Works

It relies on Event Bubbling:

1. Click happens on the child element.
2. Event bubbles up.
3. Parent listener detects which child triggered the event.

Note: We identify the clicked element using the event.target

Example:

In HTML:

<ul id="todoList">
  <li>Task 1</li>
  <li>Task 2</li>
  <li>Task 3</li>
</ul>

In JavaScript:

document.getElementById("todoList").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.style.color = "red";
  }
});

Note: Now clicking any list item changes its color.

Event Delegation vs Direct Binding

Feature	Direct Event Binding	Event Delegation
Number of Event Listeners	Multiple	Single
Performance	Slower (large lists)	Faster
Works for Dynamic Elements	No	Yes
Memory Usage	Higher	Lower

Common Mistakes in Event Delegation

❌ If you are not checking the event.target

If you don’t check the target, the parent element may respond to unwanted clicks.

✅ Better practice:

if (event.target.matches("li")) {
  // Safe
}

❌ If you are using Wrong Selector,

✅ Better practice:

if (event.target.closest("li")) {
  // Handles nested elements
}

Note: closest() is more reliable when child elements exist inside <li>.

Real Life Example of Event Delegation

Example: Add the Product through the “Add to Cart” Button

Suppose you have an e-commerce website where many product cards are displayed. Instead of adding an event listener to every Add to Cart button, we have a single event listener to the parent container.

HTML:

<div id="productContainer">
  <div class="product">
    <h3>Laptop</h3>
    <button class="addCart">Add to Cart</button>
  </div>

  <div class="product">
    <h3>Headphones</h3>
    <button class="addCart">Add to Cart</button>
  </div>

  <div class="product">
    <h3>Keyboard</h3>
    <button class="addCart">Add to Cart</button>
  </div>
</div>

JavaScript:

document.getElementById("productContainer").addEventListener("click", function(event) {

  if (event.target.classList.contains("addCart")) {
    const productName = event.target.parentElement.querySelector("h3").textContent;
    alert(productName + " added to cart");
  }

});

Explanation:

• The event listener is added to the parent container (productContainer).
• When a user clicks an Add to Cart button, the event bubbles up to the parent element.
• We check if the clicked element has the class addCart.
• The correct product name is then retrieved and displayed.

Interview / Practice Questions

Conclusion

Event Delegation is used to manage events in JavaScript by attaching a single event listener to a parent element instead of multiple child elements.

When you use Event Delegation, it reduces memory usage, improves performance, and makes the code easier to maintain. It is widely used in modern JavaScript development.