JS: Event delegation (Делегирование событий)

Что

Делегирование событий позволяет навесить обработчик события на родителя вместо того, чтобы вешать обработчики на каждый элемент, у которого может быть вызвано событие. Справедливо для ситуации, когда отнотипных событий много. Если их одно-два, смысла в делегировании нет.

Почему работает: из-за фичи Event Bubbling (всплытие события). Когда событие происходит с любым элементом на странице, о нём "знают" все предки (событие всплывает как пузырёк воздуха в воде до самого корня DOM). Справедливо для дефолтных событий. Если событие кастомизированное (вы его создали), по дефолту всплытие не работает (чтобы работало, нужно его задать).

Зачем

Ускоряет страницу:

• каждый обработчик события - это функция, которая съедает память; чем больше обработчиков, тем тяжелее браузеру
• чтобы назначить каждый обработчик, браузеру требуется время; чем больше обработчиков, тем вероятнее, что страница будет подвисать

Как

• На странице выводятся карточки. У каждой карточки есть кнопка "удалить". По клику на эту кнопку карточка должна удаляться. Вместо навешивания обработчика на каждую кнопку каждой карточки, можно навесить обработчик на родителя всех карточек. Представьте, что карточек в примере тысяча. Codepen.

Документация

• Ссылка на MDN.