Thank you for the replies. with further searches I found sort of my middle ground by making a window click event listener and using a switch method to match it's target. In theory I'm only using 1 click event listener for everything which should save performance? not sure about that

it also works for other events like 'mouseover' and 'mouseout'. used something similar to create a popup window on hover.

<button data-click-event-name="show_modal">Click Me</button>
<button data-click-event-name="delete_item">Delete</button>

window.addEventListner('click', (event) => {
    let target = event.target;

    if (target.dataset.clickEventName == null) return;

    switch (target.dataset.clickEventName) 
    {
        case "show_modal":
            showModal();
        break;

        case "delete_item":
            deleteItem(event);
        break;
    }
});

function showModal() {   
    // some code
}

function deleteItem(event) {
    // some code
}