JavaScript Event Delegation
Summary: in this tutorial, you will learn how to use the JavaScript event delegation that adds a single event handler to the parent element instead of having to register multiple event handlers to the child elements.
Introduction to JavaScript Event Delegation
Suppose that you have the following menu:
<ul id="menu">
<li><a id="home">home</a></li>
<li><a id="dashboard">Dashboard</a></li>
<li><a id="report">report</a></li>
</ul>Code language: HTML, XML (xml)
To handle the click event of each menu item, you may add the corresponding click event handlers:
let home = document.querySelector('#home');
home.addEventListener('home',(event) => {
console.log('Home menu item was clicked');
});let dashboard = document.querySelector('#dashboard');
dashboard.addEventListener('dashboard',(event) => {
console.log('Dashboard menu item was clicked');
});
let report = document.querySelector('#report');
report.addEventListener('report',(event) => {
console.log('Report menu item was clicked');
});
Code language: JavaScript (javascript)
In JavaScript, if you have a large number of event handlers on a page, these event handlers will directly impact the performance because of the following reasons:
- First, each event handler is a function which is also an object that takes up memory. The more objects in the memory, the slower the performance.
- Second, it takes time to assign all the event handlers, which causes a delay in the interactivity of the page.
To solve this issue, you can leverage the event bubbling.
Instead of having multiple event handlers, you can assign a single event handler to handle all the click events:
let menu = document.querySelector('#menu');menu.addEventListener('click', (event) => {
let target = event.target;
switch(target.id) {
case 'home':
console.log('Home menu item was clicked');
break;
case 'dashboard':
console.log('Dashboard menu item was clicked');
break;
case 'report':
console.log('Report menu item was clicked');
break;
}
});
Code language: JavaScript (javascript)
How it works.
- When you click any
<a>element inside the<ul>element with the idmenu, theclickevent bubbles to the parent element which is the<ul>element. So instead of handling theclickevent of the individual<a>element, you can capture theclickevent at the parent element. - In the
clickevent listener, you can access thetargetproperty which references the element that dispatches the event. To get theidof the element that the event actually fires, you use thetarget.idproperty. - Once having the
idof the element that fires theclickevent, you can have code that handles the event correspondingly.
The way that we handle the too-many-event-handlers problem is called the event delegation.
The event delegation refers to the technique of levering event bubbling to handle events at a higher level in the DOM than the element on which the event originated.
JavaScript event delegation benefits
When it is possible, you can have a single event handler on the document that will handle all the events of a particular type. By doing this, you gain the following benefits:
- Less memory usage, better performance.
- Less time required to set up event handlers on the page.
- The
documentobject is available immediately. As long as the element is rendered, it can start functioning correctly without delay. You don’t need to wait for theDOMContentLoadedorloadevents.
Summary
- Having a large number of event handlers will take up memory and degrade the performance of a page.
- The event delegation technique utilizes the event bubbling to handle event at a higher level in the DOM than the element on which the event originated.