Event Delegation

In JavaScript event handling, event delegation is a technique that involves attaching an event listener to a parent element instead of individual child elements. This parent element will handle the events that are triggered by its child elements.

Event delegation comes in handy when we have a large number of child elements, especially those dynamically added or removed from the DOM. Instead of attaching event listeners to each child element, we can take advantage of event bubbling and handle the events at a higher level.

How Event Delegation Works

Let's say we have a parent element with multiple child elements:

1<div class="parent">
2  <div class="child">
3    Child 1
4  </div>
5  <div class="child">
6    Child 2
7  </div>
8  <div class="child">
9    Child 3
10  </div>
11</div>

We want to attach a click event listener to each child element. Instead of doing that individually for each child element, we can attach a single click event listener to the parent element. Here's how:

1const parent = document.querySelector('.parent');
2
3parent.addEventListener('click', event => {
4  const target = event.target;
5  if (target.classList.contains('child')) {
6    console.log('Child element clicked!');
7  }
8});

In the above code, we attach a click event listener to the parent element. When a click event occurs, we check if the target element (the element that triggered the event) has the class child. If it does, we log a message indicating that a child element was clicked.

This way, we get the benefit of event bubbling. The click event will bubble up from the child element to the parent element, triggering the event listener we attached to the parent element.

Performance Benefits

Event delegation provides several performance benefits:

• Reduced memory usage: By attaching a single event listener to the parent element instead of multiple event listeners to each child element, we save memory resources.
• Improved performance for dynamically added elements: If child elements are dynamically added or removed from the DOM, we don't need to attach or remove event listeners individually. The parent element's event listener will automatically handle the events for both existing and new child elements.
• Simplified event handling code: We can centralize the event handling logic in one place, making the code easier to read and maintain.

Remember to limit the event delegation to the nearest parent element that contains all the child elements you want to handle events for. Avoid attaching event listeners to the document or body unless absolutely necessary.

Now you have a good understanding of event delegation and how it can improve performance in event handling.

xxxxxxxxxx

const parent = document.querySelector('.parent');

​

parent.addEventListener('click', event => {

  const target = event.target;

  if (target.classList.contains('child')) {

    console.log('Child element clicked!');

  }

});