One of the important features of Javascript is event handling, which allows for user interaction with web pages. As web applications become more complex, event handling can become nerve-racking. This is where event delegation comes into play as a technique to optimize event handling. In this article, we will explore the concept of event delegation, its benefits, and how to implement it in your code.
Event delegation is simply a method of handling multiple elements' events with a single event listener. Instead of adding an event listener to each element, the event listener is added to the parent element, which listens for events that are triggered by the child element.
Let's look at an example with and without event delegation.
<div class="buttons">
<button class="button_sub">Subtract</button>
<button class="button_reset">Reset</button>
<button class="button_add">Add</button>
</div>
In the code above, we have three button elements. You may add the necessary click event handlers for each button to handle the click event:
let addButton = document.querySelector(.button_add)
addButton.addEventListener('click', () => {
console.log('Add button was clicked')
})
let subtractButton = document.querySelector(.button_sub)
addButton.addEventListener('click', () => {
console.log('Subtract button was clicked')
})
let resetButton = document.querySelector(.button_reset)
addButton.addEventListener('click', () => {
console.log('Reset button was clicked')
})
Having numerous event handlers on a page can have a negative effect on the application, which includes:
- Each event listener is a function, which is also an object that takes up memory, and having too many objects in memory can lead to increased memory usage, which can in turn slow down the application's performance.
- Can make it more challenging to manage and debug your code.
with event delegation
buttons.addEventListener("click", (event) => {
if (event.target.classList.contains('button_add')) {
console.log('Add button was clicked')
}
if (event.target.classList.contains('button_sub')) {
console.log('Subtract button was clicked')
}
if (event.target.classList.contains('button_reset')) {
console.log('Reset button was clicked')
}
});
The target property of the event object contains information about the actual element receiving the event. On event.target.classList.contains, we are checking if a specific CSS class is present on the HTML element that triggered the event.
When you click the button, the event bubbles up to the div(parent element), which handles the event.
Benefits of Event Delegation
- You are able to write cleaner code, and create less event listeners with similar logic.
- Less memory space, better performance.
Conclusion
To sum it all up, event delegation is an effective method that can significantly improve the performance of your web applications. While it may require some initial effort to set-up, the benefits can be substantial in the long run, especially for complex web applications.
Top comments (2)
Please!! Use classes only for ElementStyles
Thank you for the feedback. Would look into this.