Event Delegation in JavaScript

Event Delegation is a technique in JavaScript where you add a single event listener to a parent element instead of adding multiple event listeners to child elements. The event listener on the parent element listens for events on its children using event bubbling.

This technique is useful for improving performance and managing dynamically added elements.

How Event Delegation Works

1. Event Bubbling: When an event occurs on an element, it bubbles up from the target element to its parent elements.
2. Event Targeting: You can identify which child element triggered the event using the event.target property.

Why Use Event Delegation?

1. Better performance (especially for a large number of elements).
2. Simplifies code by reducing the number of event listeners.
3. Works well with dynamically added elements.

Example: Without Event Delegation

// Add individual event listeners to each button
const buttons = document.querySelectorAll(".child-button");
buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(`Button ${event.target.textContent} clicked!`);
  });
});

Drawback:
If you dynamically add a new button, the event listener won’t be automatically applied.

Example: With Event Delegation

// Add one event listener to the parent element
const parent = document.querySelector(".parent");

parent.addEventListener("click", (event) => {
  if (event.target.classList.contains("child-button")) {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
});

//HTML
<div class="parent">
  <button class="child-button">Button 1</button>
  <button class="child-button">Button 2</button>
  <button class="child-button">Button 3</button>
</div>

Explanation:

1. The event listener is added only to the parent (.parent).
2. When any button inside the parent is clicked, the event.target identifies the specific button.
3. You use a condition (event.target.classList.contains) to ensure the event handler runs only for child-button.

Benefits of Event Delegation

1. Dynamically Added Elements: Event delegation works for elements added after the page is loaded.

// Dynamically add a new button
const parent = document.querySelector(".parent");
const newButton = document.createElement("button");
newButton.className = "child-button";
newButton.textContent = "Button 4";
parent.appendChild(newButton);

// No need to add a new event listener manually

1. Reduced Memory Usage: Instead of attaching event listeners to multiple elements, a single listener is attached to the parent.

Summary:
Event delegation is a powerful pattern for efficiently handling events on many elements, especially when they are created dynamically. It uses the event bubbling and event.target to manage events effectively.