Делегирование событий JS с той же ссылкой на функцию

Question

Делегирование событий JS с той же ссылкой на функцию

1

Я узнаю о делегировании событий, и я понимаю, что если я создаю что-то вроде следующего, это может быть дорого для памяти.

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

});

Но, что, если я укажу на одну и ту же функцию в памяти, это создаст только один обработчик.

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

Итак, почему это тоже проблема?

undefined 14 янв. 2018, в 07:34

Источник

Теги:

javascript

1 ответ

Ещё вопросы

winhowes · Accepted Answer · 2018-01-14T04-22-00.000Z

Кроме того: в вашем первом фрагменте кода я предполагаю, что вы выполняете итерацию по массиву и добавляете прослушиватели событий (я рад, что вас исправили, но я не знаю об этом без каких-либо обманов JS добавления слушателей событий в массив элементы).

Проблема здесь не в создании множества новых функций (это проблема), но создание кучки прослушивателей событий. Наличие кучки прослушивателей событий дорого, потому что браузер должен поддерживать их все, и вы должны обязательно удалить прослушиватели событий, если элементы удаляются, чтобы избежать утечек памяти.

Лучше всего использовать делегирование событий. Основная идея заключается в использовании пузырьков событий и имеет один обработчик событий на родительском элементе, который затем принимает действие в зависимости от цели события.

Связанный с этим ответ, который хорошо демонстрирует компромисс производительности: добавляет ли слишком много прослушивателей событий влияние на производительность?