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

Posted 2023-02-21

【中文标题】一个事件监听器循环元素VS单个元素上的事件监听器？

【英文标题】：One event listener looping elements VS event listener on individual elements?

【发布时间】：2021-03-17 15:30:14

【问题描述】：

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

例如：

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

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

【问题讨论】：

我严重怀疑该选择在 99% 的情况下是否会对性能产生任何影响。选择任何使代码更易于管理的东西，或者其他任何你喜欢的东西

【参考方案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