Simplifying Code with Event Delegation in Your Javascript Applications
Tags: javascript, frontend, learning, tutorial
Published: 2023-04-25 21:02:34


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.


```html
<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:

```javascript
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_

```javascript
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.