DEV Community

Jay Cruz
Jay Cruz

Posted on • Originally published at jay-cruz.Medium on

2

Event Delegation

Image of blocks spelling out javascript

What is Event Delegation

In simple terms, event delegation is just a way to add one event listener to listen for multiple child elements on the dom. Instead of having to attach a listener to each element and running the risk of slowing down your application or breaking something when you need to add to your code event delegation prevents this. It supports event listening using a single common parent element.

An example

Say you have a shopping list as an unordered list element. Each item in the shopping list is contained in a li tag with a remove button next to each item.

<ul id="shopping-list">
  <li class="item">Milk<button class="remove">X</button></li>
  <li class="item">Bread<button class="remove">X</button></li>
  <li class="item">Eggs<button class="remove">X</button></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

If you wanted a specific item to be deleted when the remove button is clicked you’d want to listen for the click event somehow. Your first instinct might be to iterate over each element and attach an event listener to it.

const removeBtns = Array.from(document.getElementsByClassName('remove'))
removeBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.target.parentElement.remove()
  })
});
Enter fullscreen mode Exit fullscreen mode

While this would work and is a-okay for a small list of elements like our shopping list it is not the most optimal solution. Using this iteration solution if you wanted to add many more items to your list then as it grows the performance would decrease and begin to slow down your application. This is because having an event handler on a large number of similar elements would begin to take up more memory resulting in poor performance. A better way would be to use the event delegation pattern.

const shoppingList = document.querySelector('#shopping-list');
shoppingList.addEventListener('click', (e) => {

  // Check if remove button clicked
  if (e.target.className === 'remove') {
    e.target.closest('.item').remove() // Remove item
  }
});
Enter fullscreen mode Exit fullscreen mode

In this example, we’re first grabbing the shopping list container element which is the parent of all child elements containing our items we want to be able to delete. We then attach the event listener to it. In the body of the event listener, we are checking to see if the remove button was clicked and removing the specified item from the list if so. This solution uses two important event features called bubbling and target. When an event is triggered it first runs the handler on that inner element then the event bubbles up to all parent elements until reaching the document object, this is event bubbling. The event target is the most nested element that initiated the event and it gives us the details of that element.

Summary

Event delegation can be very useful especially when working with a large collection of similar elements that need to be handled. I also find it to be a more simple solution to implement vs having to iterate over a bunch of elements and attach listeners to them.

Resources

Originally published at https://coderjay06.github.io on February 10, 2021.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay