'Is there an overhead to attaching many event listeners versus one iterating

Let's say I have a list of HTMLElement, and I want to check whether the composedPath contains the item, is there an overhead to doing this:

for (const item of list) {
    document.addEventListener("click", () => {
        if (event.composedPath.includes(item)) { doThing(item); }
    }
}

versus doing this:

document.addEventListener("click", () => {
    for (const item of list) {
        if (event.composedPath.includes(item)) { doThing(item); }
    }
}

Why would I even want to do it the first way? Because I'm working with Svelte (a component-based system like React), and it's easier to do things on a component-basis (e.g. cleaning up the event handler), rather than outside of it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source