Attach and Delegate DOM Event Listeners

// Function to add a single event listener
function addEventListener(element, eventType, handler, options = false) {
    if (!element) return;
    element.addEventListener(eventType, handler, options);
}

// Function to remove a single event listener
function removeEventListener(element, eventType, handler, options = false) {
    if (!element) return;
    element.removeEventListener(eventType, handler, options);
}

// Function for event delegation
function delegateEvent(parentElement, eventType, childSelector, handler) {
    if (!parentElement) return;

    const delegatedHandler = function(event) {
        const target = event.target;
        const matchingChild = target.closest(childSelector); // Finds closest ancestor matching selector (including self)

        if (matchingChild && parentElement.contains(matchingChild)) {
            // Ensure the matching child is actually within the parentElement
            handler.call(matchingChild, event); // Call handler with 'this' set to the matching child
        }
    };

    parentElement.addEventListener(eventType, delegatedHandler);
    return delegatedHandler; // Return this to allow for removal later
}

// Usage example:
// <ul id="myList">
//   <li>Item 1</li>
//   <li class="special">Item 2</li>
//   <li>Item 3</li>
// </ul>
// <button id="myButton">Click Me</button>

const myButton = document.getElementById('myButton');
const myList = document.getElementById('myList');

const buttonClickHandler = () => console.log('Button clicked!');
addEventListener(myButton, 'click', buttonClickHandler);

// Delegate click events for list items
const listItemClickHandler = function(event) {
    console.log(`List item clicked: ${this.textContent} (delegated)`);
    this.style.backgroundColor = 'yellow';
};
const delegatedHandlerRef = delegateEvent(myList, 'click', 'li', listItemClickHandler);

// To remove the delegated handler later:
// myList.removeEventListener('click', delegatedHandlerRef);
// removeEventListener(myButton, 'click', buttonClickHandler);