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

Question

在文档级别使用一个事件侦听器循环元素是否比在单个元素上使用多个事件侦听器更高效？

例如：

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)
  })
})

此外，是否有人做过任何有效的测量来证明让一个侦听器循环元素比向每个单独的元素添加事件侦听器更有效？

Answer 1

我已经阅读了更多相关内容，我认为使用多个 addEventListener 对性能没有任何影响。

总而言之，有人可能遇到的唯一性能问题是使用匿名函数而不是静态函数。

例如：

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)
})

因此，在循环中使用匿名函数时必须小心

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

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

One event listener looping elements VS event listener on individual elements?

javascript

performance

dom

dom-events