Я узнаю о делегировании событий, и я понимаю, что если я создаю что-то вроде следующего, это может быть дорого для памяти.
bigElementsArray.addEventListener("click", e => {
});
Но, что, если я укажу на одну и ту же функцию в памяти, это создаст только один обработчик.
const sameFunctionRef = e => {};
bigElementsArray.addEventListener("click", sameFunctionRef);
Итак, почему это тоже проблема?
Кроме того: в вашем первом фрагменте кода я предполагаю, что вы выполняете итерацию по массиву и добавляете прослушиватели событий (я рад, что вас исправили, но я не знаю об этом без каких-либо обманов JS добавления слушателей событий в массив элементы).
Проблема здесь не в создании множества новых функций (это проблема), но создание кучки прослушивателей событий. Наличие кучки прослушивателей событий дорого, потому что браузер должен поддерживать их все, и вы должны обязательно удалить прослушиватели событий, если элементы удаляются, чтобы избежать утечек памяти.
Лучше всего использовать делегирование событий. Основная идея заключается в использовании пузырьков событий и имеет один обработчик событий на родительском элементе, который затем принимает действие в зависимости от цели события.
Связанный с этим ответ, который хорошо демонстрирует компромисс производительности: добавляет ли слишком много прослушивателей событий влияние на производительность?