Event Delegation

Event delegation is an efficient way to handle events on multiple similar elements by setting up a single listener on a parent element.

Example:

let list = document.querySelector("#itemList");

list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("List item clicked: " + event.target.textContent);
  }
});

Here, a single listener on #itemList captures clicks on each li item without needing individual listeners for each li. This is especially helpful for dynamically added elements, as the parent element can handle events for future child elements as well.