Event Delegation in JavaScript
Last Updated :
27 Jan, 2022
Before learning about Event Delegation in JavaScript, we must be familiar with phases of JavaScript event https://www.geeksforgeeks.org/phases-of-javascript-event/
Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the .target property of the event object.
Let's see an example with and without event delegation
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 will associate the function with every <li> element that is shown in the below image. We are creating an <ul> element, attaching too many <li> elements, and attaching an event listener with a responding function to each paragraph as we create it.
Without Event Delegation
Implementing the same functionalities with an alternate approach. In this approach, we will associate the same function with all event listeners. We are creating too many responding functions (that all actually do the exact same thing). We could extract this function and just reference the function instead of creating too many functions:
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.
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)
Now there is a single event listener and a single responding function. In the above-shown method, we have improved the performance, but we have lost access to individual <li> elements so to resolve this issue, we will use a technique called event delegation.
The event object has a special property call .target which will help us in getting access to individual <li> elements with the help of phases.
Steps:
- <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.
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);
Similar Reads
Pointer Events in Javascript DOM Pointer events are a set of DOM (Document Object Model) events that provide a unified way of handling inputs from a variety of devices, such as touchscreens, mouse, and pen/stylus. These events are supported by modern browsers and allow developers to write code that responds to user interactions wit
5 min read
JavaScript Custom Events Events are used in almost every web application, such as the onclick event is used to execute some code when the user clicks on something. There are already numerous built-in events available to be used, but what if we want our custom event? Let us suppose we are creating a chat application, and we
3 min read
Event Queue in JavaScript JavaScript, being single-threaded, processes tasks sequentially, meaning it executes one task at a time. This can pose a challenge when dealing with operations that take time to complete, such as fetching data from a server or performing complex calculations. To handle such scenarios efficiently, Ja
5 min read
JavaScript Events JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by various user interactions or by the browser itself. HTML<html> <script> function myFun() { document.getElementById( "gfg").innerHTML = "GeeksforGeeks"; } </script> <body> <but
3 min read
What is Event Bubbling and Capturing in JavaScript ? Events are a fundamental construct of the modern web. They are a special set of objects that allow for signaling that something has occurred within a website. By defining Event listeners, developers can run specific code as the events happen. This allows for implementing complex control logic on a w
5 min read