一个事件监听器循环元素VS单个元素上的事件监听器？

Question

Is it more performant to have one event listener looping elements at document level than having multiple event listeners on individual elements?

For example:

const elements = []

const logic = (e) => { /*any logic*/ }

// event listener on individual elements
elements.forEach((el) => el.addEventListener('click', logic))

// one event listener looping elements
document.addEventListener('click', (e) => {
  elements.forEach((el) => {
    if (e.target.isEqualNode(el)) logic(el)
  })
})

Also, does anybody have done any valid measurement to prove that having one listener looping elements is more efficient than adding event listeners to each individual elements?

Answer 1

I've read more on this and I think using multiple addEventListener has no affect on the performance whatsoever.

In conclusion, the only performance issue someone might encounter is by using anonymous function instead of static function.

For example:

const elements = []

elements.forEach((el) => {
  // a new handler is created with each iteration
  el.addEventListener('click', () => { /* some logic */ }) // anonymous function
})

// static function
const logic = () => {
  /* some logic */
}

elements.forEach((el) => {
  // result in smaller memory consumption because there is only one handler
  el.addEventListener('click', logic)
})

So, we have to be careful when using anonymous function inside a loop

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Memory_issues