47 Event Delegation

Event delegation is a design pattern in JavaScript where you attach a single event listener to a parent element to manage and handle events that occur on its child elements.

• Instead of attaching event listeners to each individual child element
• you delegate the responsibility to the parent element to listen for events and handle them based on the event's target
• target means the specific child element that triggered the event

1. The problem

Let's say on a shopping page, we have categories parent div & category cards as children

• If we click on Laptops -> navigate to Laptops page, Camera -> Camera page etc.
• If we keep adding click event listener to all category cards it would be too many to handle
• Also in infinite scrolling, the cards would keep loading.

 +--------------------------------------------------------+
 |   Parent Node                                          |
 +--------------------------------------------------------+
 |                                                        |
 | +-------------+  +-------------+  +-------------+      |
 | |   Child 1   |  |   Child 1   |  |   Child 1   |      |
 | +-------------+  +-------------+  +-------------+      |
 |                                                        |
 +--------------------------------------------------------+

//script.js
document.querySelector("#laptop").addEventListener("click", () => {
  window.location.href = "/laptop";
});

document.querySelector("#camera").addEventListener("click", () => {
  window.location.href = "/camera";
});

document.querySelector("#shoes").addEventListener("click", () => {
  window.location.href = "/shoes";
});

//index.html
<div>
  <p>Categories</p>
  <button id="laptop">Laptops</button>
  <button id="camera">Camera</button>
  <button id="shoes">Shoes</button>
  </div>
<script src="./script.js"></script>

2. The Solution

Instead of attaching so many event listener to the children we can attach the event listener to the parent

• The event's will propagate up to the parent due to event bubbling
• If we click on the child, the click event will be invoked of the parent
• We have added the check for tag because we have a paragraph also inside the parent div.

//script.js
document.querySelector("#categories").addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    window.location.href = `/${e.target.id}`;
  }
});

<div id="categories">
   <p>Categories</p>
   <button id="laptop">Laptops</button>
   <button id="camera">Camera</button>
   <button id="shoes">Shoes</button>
</div>
<script src="./solution/script.js"></script>