/**
 * Implements event delegation on a parent element to handle events
 * on its dynamically created or numerous children. This improves performance
 * and simplifies event management.
 */
function setupEventDelegation(parentId, childSelector, eventType, handlerFunction) {
  const parentElement = document.getElementById(parentId);

  if (parentElement) {
    parentElement.addEventListener(eventType, function(event) {
      // Check if the clicked element matches the childSelector
      if (event.target && event.target.matches(childSelector)) {
        handlerFunction(event.target);
      }
    });
    console.log(`Event delegation set up for #${parentId} for children matching "${childSelector}" on event "${eventType}".`);
  } else {
    console.error(`Parent element with ID "${parentId}" not found.`);
  }
}

// Example Usage (assuming an HTML structure like <ul id="myList"><li class="item">1</li><li class="item">2</li></ul>):
// function handleItemClick(clickedItem) {
//   console.log(`Item clicked: ${clickedItem.textContent}`);
//   clickedItem.style.backgroundColor = 'yellow';
// }
// setupEventDelegation('myList', '.item', 'click', handleItemClick);