Что такое делегирование событий в JavaScript?

Question

Делегирование событий — это подход, при котором событие обрабатывается на родительском элементе, а не на каждом дочернем элементе, к которому оно относится. Это работает благодаря всплытию событий: событие, вызванное на дочернем элементе, поднимается вверх по дереву DOM до родителя. Этот метод позволяет сократить количество обработчиков событий и упростить их управление.Пример:document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

YeaHub · Accepted Answer

В JavaScript событие, вызванное на одном элементе, может "всплывать" (bubble) вверх по дереву DOM, доходя до его предков. Делегирование событий использует это свойство, чтобы обрабатывать события для множества дочерних элементов с помощью одного обработчика на родительском элементе.Зачем нужно делегирование событий?Оптимизация производительностиЕсли у вас есть много дочерних элементов (например, список из 100 элементов), добавление обработчика к каждому элементу создаёт избыточную нагрузку. Делегирование позволяет использовать один обработчик.Динамическое добавление элементовКогда новые элементы добавляются в DOM динамически, с делегированием не нужно вручную добавлять обработчики к этим элементам.Как это работает?Добавляем обработчик события на родительский элемент. Внутри обработчика проверяем event.target, чтобы определить, на каком дочернем элементе произошло событие.Пример: Преимущества делегированияМеньше обработчиков: Экономия ресурсов, так как один обработчик заменяет множество.Поддержка динамических элементов: Работает даже с элементами, добавленными после загрузки страницы.Ограничения делегированияНе все события всплывают: Например, события focus и blur не поддерживают всплытие. Для них можно использовать focusin и focusout, которые всплывают.Увеличение сложности кода: Нужно писать дополнительную логику для проверки, на каком элементе произошло событие.Расширенный пример: делегирование в списке

Элемент 1
Элемент 2
Элемент 3

Как это связано с современными библиотеками?В библиотеках, таких как React или Vue, делегирование событий встроено в их реализацию. Они автоматически обрабатывают события на уровне виртуального DOM, что минимизирует добавление лишних обработчиков.Делегирование событий — это инструмент для эффективной работы с событиями в DOM. Оно особенно полезно, когда нужно управлять большим количеством элементов или динамически создавать новые.