What is event delegation in JS?

Javascript Interview Question #3
Difficulty: MEDUIM
Popularity: 2/5

The event delegation in JS is a JavaScript technique where a single event handler is attached to a parent element to manage events for its child elements. This ancestor element listens for events that bubble up from its descendants.

Event delegation example for dummies 😊

event delegation in JS

Imagine you have a list of items in the DOM, like a to-do list. Each item in the list is represented by an HTML <li> element. Now, let’s say you want to do something when you click on any item in that list, like marking it as completed.

One way to do this is to attach a separate click event handler to each <li> element. So if you have 10 items, you would need to write 10 event handlers 🤯. This can become cumbersome and inefficient, especially as your list grows.

Event delegation offers a smarter approach.

Instead of attaching event listener to each individual <li> element, you attach a single event handler to a higher-level element that contains all the <li> elements, such as the <ul> element wrapping the list.

Now, when you click on any item in the list, the click event “bubbles up” from the clicked <li> element to its parent <ul> element.

With event delegation, you can listen for these bubbled-up events at the parent level and then figure out which specific <li> element triggered the event.

Code example:

// Function to handle the click event
function handleItemClick(event) {
  // Check if the clicked element is an <li> element
  if (event.target.tagName === 'li') {
    // Toggle the class to mark the item as completed

// Attach event handler to the parent element
document.querySelector('#todoList').addEventListener('click', handleItemClick);
Best Practice
For event delegation use nearest common ancestor of the elements.

Event delegation in JS: Pros and Cons

benefits of event delegation

Simplifies event managementCan be confusing for beginners initially
Reduces code complexityMay lead to event handling logic separation
Enhances performance for large sets of elementsEvent propagation can complicate debugging
Works well with dynamically generated contentMay not be suitable for all scenarios
Enables attaching events to future elementsPotential for event conflicts or unintended handling
event delegation in Javascript

Event delegation for dynamically generated elements

Since event delegation allows you to attach event handlers to parent elements, you don’t need to worry about attaching handlers to elements that don’t exist yet when the page loads.

Code example:

// Function to handle the click event for list items
function handleItemClick(event) {
  if (event.target.tagName === 'li') {
    alert('You clicked on item: ' + event.target.textContent);

// Function to add a new item to the list
function addItem() {
  let newItem = document.createElement('li');
  newItem.textContent = 'New Item';

// Attach event handler to the parent element
document.querySelector('#dynamicList').addEventListener('click', handleItemClick);

// Attach event handler to the button to add new items dynamically
document.querySelector('#addItemBtn').addEventListener('click', addItem);

Bottom Line

event delegation in Javascript

Event delegation in JavaScript reduces code complexity, enhances performance, and simplifies event management by attaching a single event handler to a parent element, delegating event handling to its descendants. This approach is particularly useful for dynamically generated content or large sets of elements.

Ilyas Seisov

Ilyas Seisov

UI/Web designer and Javascript developer with Master's degree in Computer Science. He helps businesses transform ideas into reality with the power of design and code. Ilyas creates modern, aesthetic web applications and reads minds in a free time.

Leave a Reply

Your email address will not be published. Required fields are marked *