Question

我正在学习事件委托，我理解如果我正在创建类似下面的内容，那么内存可能会很昂贵。

bigElementsArray.addEventListener("click", e => {

});

但是，如果我指向内存中的相同函数，这将只创建一个处理程序。

const sameFunctionRef = e => {};
bigElementsArray.addEventListener("click", sameFunctionRef);

那么，为什么这也是一个问题呢？

Answer 1

旁白：在您的第一个代码段中，我假设您正在迭代一个数组并添加事件监听器（我很乐意纠正，但我不是意识到没有一些JS技巧可以将事件监听器添加到元素数组中。

这里的问题不是创建一堆新函数（即问题），而是创建一堆事件监听器。拥有一堆事件监听器是很昂贵的，因为浏览器需要全部维护它们，如果元素被删除以避免内存泄漏，你需要确保删除事件监听器。

更好的方法是使用event delegation。基本思想是利用事件冒泡并在父元素上有一个事件处理程序，然后根据事件目标采取行动。