Implementing Event Delegation for Dynamic DOM Elements

function setupEventDelegation(parentId, selector, eventType, handlerFunction) {
    const parentElement = document.getElementById(parentId);
    if (!parentElement) {
        console.error(`Parent element with ID '${parentId}' not found.`);
        return;
    }

    parentElement.addEventListener(eventType, function(event) {
        // Check if the clicked element matches the selector
        const targetElement = event.target.closest(selector);
        if (targetElement && parentElement.contains(targetElement)) {
            // Call the handler function with the matched element
            handlerFunction(event, targetElement);
        }
    });
}

// Example Usage:
// Assume you have a list in your HTML, and items might be added dynamically:
// <ul id="myList">
//     <li class="item" data-id="1">Item 1</li>
//     <li class="item" data-id="2">Item 2</li>
// </ul>

// A handler function for clicks on list items
function handleItemClick(event, listItem) {
    console.log(`Item clicked: ${listItem.textContent}, Data ID: ${listItem.dataset.id}`);
    listItem.style.backgroundColor = '#e0e0ff'; // Highlight clicked item
}

// Set up delegation for 'click' events on any 'li.item' within 'myList'
setupEventDelegation('myList', 'li.item', 'click', handleItemClick);

// Dynamically add a new item - it will also be handled by the delegated listener
document.getElementById('myList').innerHTML += '<li class="item" data-id="3">Item 3 (New!)</li>';