39. What is event delegation in JavaScript? What are the various scenarios in which it is useful?
medium
Event delegation is a technique used in JavaScript to handle multiple events on multiple elements using a single listener function. Instead of attaching separate event listeners to each individual element, you attach a single listener to the parent element and use `event.target` to determine which child element triggered the event.

This approach can be useful in situations where there are many elements that share similar event handlers. For example, suppose you have a list of items, and each item has a delete button associated with it. Instead of attaching a delete button click listener to each individual item, you can attach a single listener to the parent element:
const items = document.querySelectorAll('.item');

items.forEach((item) => {
  item.addEventListener('click', (e) => {
    if (e.target.closest('button[type="delete"]')) {
      e.preventDefault();
      // delete item logic here
    }
  });
});
In this example, we use `document.querySelectorAll()` to select all the `<li>` elements in the list, and then attach a click event listener to each element using the `forEach()` method. If the clicked element is a delete button, we prevent the default behavior using `event.preventDefault()`, and execute the delete item logic.

Event delegation can also be useful for handling events that occur on elements that may not yet exist at the time of event attachment. For example, suppose you have a form with an input element that dynamically appears based on user interaction. Instead of attaching a change event listener to each individual input element as it is added, you can attach a single listener to the parent element:
const form = document.getElementById('my-form');

form.addEventListener('change', (e) => {
  if (e.target.closest('input[type="text"]')) {
    // handle input change logic here
  }
});

// add dynamic input element
const inputElement = document.createElement('input');
inputElement.setAttribute('type', 'text');
form.appendChild(inputElement);
In this example, we attach a change event listener to the form element using the `addEventListener()` method. If the changed element is an input element with type "text", we execute the input change logic.

Another scenario where event delegation can be useful is when you need to handle events that occur on elements that are not children of the parent element. For example, suppose you have a modal window that appears above multiple elements on the page, and you want to close it when the user clicks outside the modal window. Instead of attaching a click event listener to each individual element using the `closest()` method, you can attach a single listener to the parent element:
const modalWindow = document.getElementById('modal-window');
const form = document.getElementById('my-form');

modalWindow.addEventListener('click', (e) => {
  e.stopPropagation();
  // close modal logic here
});

// add dynamic element to page
const newElement = document.createElement('div');
newElement.innerHTML = '<a href="#">Link</a>';
document.body.appendChild(newElement);

form.addEventListener('click', (e) => {
  if (!e.target.closest('#modal-window')) {
    e.stopPropagation();
    // close modal logic here
  }
});
In this example, we attach a click event listener to the form element using the `addEventListener()` method. If the clicked element is not inside the modal window, we prevent the default behavior using `event.stopPropagation()`, and execute the close modal logic.

Overall, event delegation can be a powerful technique for handling events on multiple elements in an efficient manner.
PreviousNext