Event Delegation in JavaScript

Last Updated : 17 Jan, 2026

Event Delegation is a pattern used to handle events efficiently by attaching a single event listener to a parent element instead of adding listeners to multiple similar child elements, and then identifying the actual source of the event using the event.target property.

  • Reduces the number of event listeners.
  • Improves performance and memory usage.
  • Uses event bubbling to capture events.
  • Ideal for dynamically added elements.

Examples:

JavaScript 
const customUI = document.createElement('ul');

for (var i = 1; i <= 10; i++) {
    const newElement = document.createElement('li');
    newElement.textContent = "This is line " + i;
    newElement.addEventListener('click', () => {
        console.log('Responding')
    })
    customUI.appendChild(newElement);
}

The above code attaches the same responding function to every <li> element. Here, a <ul> element is created, multiple <li> elements are added, and an event listener is attached to each item individually as it is created.

  • Each <li> has its own event listener.
  • Creates many identical responding functions.
  • Increases memory usage.
  • Less efficient compared to event delegation.
Without Event Delegation


Efficient Event Handling Using a Reusable Event Handler Function

This alternate approach implements the same functionality by attaching a single reusable function to multiple event listeners instead of creating separate functions for each one. By extracting the common logic into one function and referencing it, we avoid creating many identical responding functions.

  • Uses one shared handler function for multiple elements.
  • Reduces redundant function creation.
  • Improves code readability and maintainability.
  • More efficient than defining separate identical callbacks.
JavaScript 
const customUI = document.createElement('ul');

function responding() {
    console.log('Responding')
}

for (var i = 1; i <= 10; i++) {
    const newElement = document.createElement('li');
    newElement.textContent = "This is line " + i;
    newElement.addEventListener('click', responding)
    customUI.appendChild(newElement);
}

The functionality of the above code is shown below -

Without Event Delegation

In the above approach, we still have too many event listeners pointing to the same function. Now implementing the same functionalities using a single function and single event.

JavaScript 
const customUI = document.createElement('ul');

function responding() {
    console.log('Responding')
}

for (var i = 1; i <= 10; i++) {
    const newElement = document.createElement('li');
    newElement.textContent = "This is line " + i;
    customUI.appendChild(newElement);
}
customUI.addEventListener('click', responding)

With this approach, a single event listener is attached to the parent <ul> element, and event delegation is used to handle clicks on individual <li> elements efficiently.

  • Uses one event listener on the parent <ul> instead of multiple listeners on each <li>.
  • Identifies the clicked <li> using the event.target property.
  • Improves performance, memory usage, and scalability.
  • Works through the event bubbling phase.

Steps of Event Delegation

The click event travels from the parent to the child and back up through the DOM, allowing a single listener on the parent element to detect and handle interactions with specific child elements using event.target.

  • <ul> element is clicked.
  • The event goes in the capturing phase.
  • It reaches the target (<li> in our case).
  • It switches to the bubbling phase.
  • When it hits the <ul> element, it runs the event listener.
  • Inside the listener function event.target is the element that was clicked.
  • Event.target provides us access to the <li> element that was clicked.

The .nodeName property of the .target allows us to identify a specific node. If our parent element contains more than one child element then we can identify specific elements by using the .nodeName property.

JavaScript 
const customUI = document.createElement('ul');

function responding(evt) {
    if (evt.target.nodeName === 'li')
        console.log('Responding')
}

for (var i = 1; i <= 10; i++) {
    const newElement = document.createElement('li');
    newElement.textContent = "This is line " + i;
    customUI.appendChild(newElement);
}

customUI.addEventListener('click', responding);
Suggested Quiz

0 Questions

Quiz Completed Successfully

Your Score : 0/0

Accuracy : 0%

Comment

Explore