Scribd
Upload
10 views3 pages

Event Delegation in JavaScript

Event Delegation is a JavaScript technique that improves performance by using a single event listener on a parent element instead of multiple listeners on child elements, leveraging event bubbling. This method is particularly useful for handling dynamic elements added to the DOM, as it allows new items to respond to events without needing additional listeners. Key benefits include reduced memory usage and better performance in scenarios with many or dynamically added elements.

Uploaded by

dikshyant dash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views3 pages

Event Delegation in JavaScript

Event Delegation is a JavaScript technique that improves performance by using a single event listener on a parent element instead of multiple listeners on child elements, leveraging event bubbling. This method is particularly useful for handling dynamic elements added to the DOM, as it allows new items to respond to events without needing additional listeners. Key benefits include reduced memory usage and better performance in scenarios with many or dynamically added elements.

Uploaded by

dikshyant dash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

📌 Event Delegation in JavaScript

🚀 What is Event Delegation?

Event Delegation is a technique in JavaScript where a single event listener is


added to a parent element instead of multiple listeners for each child element. This
takes advantage of event bubbling, improving performance and efficiency.

🔹 How Event Bubbling Works (Core Concept)

When an event occurs on a child element, it "bubbles up" through its parent elements.
Event Delegation leverages this bubbling to handle events at a higher level in the
DOM.

📌 Example Without Delegation (Multiple Listeners)

const items = document.querySelectorAll(".item");

items.forEach((item) => {

item.addEventListener("click", () => {

console.log("Item clicked!");

});

});

❌ Problem:

 If there are 100+ items, we are adding 100+ event listeners, which is
inefficient.

🔹 Using Event Delegation (Efficient Approach)

Instead of attaching listeners to each item, we attach one listener to the parent
and use event.target to detect which child was clicked.

✅ Example of Event Delegation

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

if (event.target.classList.contains("item")) {

console.log(`Clicked on: ${event.target.textContent}`);

});

✅ Benefits:

 Only one event listener is used (better performance).

 Works for dynamically added elements (like items added via JavaScript).
🔹 When to Use Event Delegation?

Use Event
Scenario Why?
Delegation?

Many elements need event Reduces memory & improves


✅ Yes
listeners performance

Dynamic elements (added Delegation handles newly added


✅ Yes
later) elements

Few elements, static


❌ No Direct listeners are fine
structure

🔹 Real-World Example: Handling Dynamic Buttons

Imagine a "Load More" button that adds new items dynamically. Event Delegation
ensures even new items work without adding new listeners.

document.getElementById("container").addEventListener("click", (event) => {

if (event.target.classList.contains("btn")) {

alert(`Button ${event.target.textContent} clicked!`);

});

// Dynamically add a new button

setTimeout(() => {

let btn = document.createElement("button");

btn.textContent = "New Button";

btn.className = "btn";

document.getElementById("container").appendChild(btn);

}, 3000);

✅ The new button still works without needing extra event listeners!

🔥 Key Takeaways

✅ Event Delegation improves performance by reducing event listeners.


✅ Uses event bubbling to listen at a higher DOM level.
✅ Works for dynamically added elements, unlike direct event listeners.

Would you like a diagram of event bubbling and delegation? 🚀

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy