Javascript Events can get really messy when and may also lead to performance issues at times. Event Delegation is a good solution for countering these issues and making our websites and webapps more performant and robust.

What is Event Delegation?

If we are having similar events to a bunch of elements then instead of adding listeners to each element with Event Delegation we can delegate the event of all these elements to its common ancestor. This drastically reduces the count of event listeners making the page more performant.

The normal way of handling the same Events for multiple elements is by adding Event Listeners for each element.

<ul>
  <li>LIST ITEM 1</li>
  <li>LIST ITEM 2</li>
  <li>LIST ITEM 3</li>
</ul>

  
let listItems = document.querySelectorAll('li');
listItems.forEach(function(listItem){
  listItem.addEventListener('click', function(event){
    alert(event.target.innerText);
  });
});
  

Event Delegation Delegates the event to the common ancestor of the elements for which we need the same event listeners. Let's look at the solution to the above problem.

// Handling same case with Event Delegation with 
// Single Event Listener to the common ancestor

let list = document.querySelector('ul');

list.addEventListener('click', function(event){
  if(event.target.tagName=="LI"){
    console.log(event.target.innerText);
    hightlight(event.target)
  }
})

function hightlight(targetElement){
  targetElement.classList.toggle('active')
}

Check out the codepen link for the live example https://codepen.io/singhkunal2050/pen/QWOoBPM?editors=0110

See the Pen Event Delegation in JS by Kunal SIngh (@singhkunal2050) on CodePen.

I hope you learned something new today if you did then please share this post with your friends who might find this useful aswell. Have any questions? Feel free to connect with me on LinkedIn Twitter @singhkunal2050. You can also write me here.

Happy Coding 👩‍💻!