Что такое event delegation?

Делегирование событий является одним из самых мощных и элегантных паттернов проектирования интерфейсов в JavaScript. Суть этого подхода заключается в том, что вместо навешивания отдельного обработчика событий на каждый дочерний элемент, мы устанавливаем всего один общий обработчик на их общего родителя. Этот метод опирается на механизм всплытия событий, благодаря которому клик или любое другое действие на дочернем узле всегда доходит до родительского контейнера.

При срабатывании такого общего обработчика в объекте события всегда доступны два ключевых свойства: event.target и event.currentTarget. Свойство event.target указывает на конкретный элемент, на котором непосредственно произошло действие, например, на конкретную кнопку внутри списка. В то же время event.currentTarget ссылается на элемент, к которому привязан сам обработчик, то есть на родительский контейнер. Разница между этими свойствами лежит в основе работы паттерна.

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

Поскольку событие всплывает от целевого элемента, обработчику на родителе часто нужно понять, по какому именно элементу кликнули. Для фильтрации и проверки элементов используются стандартные методы DOM API, такие как matches() и closest(). Метод matches('selector') проверяет, соответствует ли элемент заданному CSS-селектору, а closest('selector') поднимается вверх от целевого элемента в поисках ближайшего предка, удовлетворяющего условию, что особенно удобно, если клик пришелся на иконку внутри кнопки.