Home > Tips & Tricks > Event Delegation in JavaScript

Event Delegation in JavaScript

Event delegation is a pattern in which a single event listener is attached to a common ancestor of multiple elements. Instead of attaching an event handler to each individual element, you delegate the responsibility to a parent element.

This is particularly useful for handling events on dynamically added elements, as well as improving performance by minimizing the number of event handlers.

Let’s understand it with a real-world example.

Let’s imagine you’re hosting a big party with lots of guests. Now, think of each guest as an element on a webpage, like a button or a link. Instead of individually checking and handling every guest’s actions, you decide to let the party venue staff take care of it.

In JavaScript, we call this type of concept “Event Delegation.” It’s like appointing someone to handle actions on behalf of many elements. Instead of attaching an event listener to each button, you attach one to a common parent element (like the entire party venue).

So, when a guest (button or link) does something, like clicking, the event bubbles up to the parent (the party venue). The appointed staff (event listener) at the venue checks who did the action and takes the appropriate action for that specific guest.

This way, you save time and resources, just like how in event delegation, you handle events for multiple elements efficiently by relying on a common parent instead of attaching listeners to each individual element. It’s like having a party planner who manages everything for you, making the event more organized and less overwhelming.

Event Delegation Example

Consider a scenario where you have a list of items, and you want to log a message when any item is clicked. Instead of attaching an event listener to each item, you can delegate the event handling to the parent container.

<ul id="itemList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- More dynamically added items can be added here -->
</ul>
<script>
    // Event delegation for the entire list
    document.getElementById("itemList").addEventListener("click", function(event) {
        // Check if the clicked element is an 'li' element
        if (event.target.tagName === 'LI') {
            var clickedItem = event.target.textContent;
            console.log("Clicked on:", clickedItem);
        }
    });

    // Simulating the addition of a new item dynamically
    setTimeout(function() {
        var newItem = document.createElement("li");
        newItem.textContent = "Item 4 (Dynamically Added)";
        document.getElementById("itemList").appendChild(newItem);
    }, 3000);
</script>

In this JavaScript example, the event listener is attached to the #itemList element using addEventListener.

The event object is then checked to see if the target element (the element that triggered the event) is an li element. If it is, the click event is handled.

The dynamically added item will also trigger the same event handler, demonstrating the concept of event delegation in pure JavaScript.

More Tricks

Being tricky 😉

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment