§ Event Delegation in JavaScript

Event delegation is a technique used in JavaScript to handle events efficiently. Instead of attaching an event listener to each individual element, we attach a single event listener to the parent element and let the event propagate up to the parent. Then, we use the target property of the event object to determine which child element was actually clicked.

For example, let's say we have a list of items, and we want to attach a click event to each item to toggle its class. We can use event delegation to attach a single event listener to the parent ul element, like this:

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('my-list').addEventListener('click', function(event) {
    if (event.target.nodeName === 'LI') {
      event.target.classList.toggle('selected');
    }
  });
</script>