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

В JavaScript событие, вызванное на одном элементе, может "всплывать" (bubble) вверх по дереву DOM, доходя до его предков. Делегирование событий использует это свойство, чтобы обрабатывать события для множества дочерних элементов с помощью одного обработчика на родительском элементе.

Зачем нужно делегирование событий?

• Оптимизация производительности
  Если у вас есть много дочерних элементов (например, список из 100 элементов), добавление обработчика к каждому элементу создаёт избыточную нагрузку. Делегирование позволяет использовать один обработчик.

• Динамическое добавление элементов
  Когда новые элементы добавляются в DOM динамически, с делегированием не нужно вручную добавлять обработчики к этим элементам.

Как это работает?

• Добавляем обработчик события на родительский элемент.

• Внутри обработчика проверяем event.target, чтобы определить, на каком дочернем элементе произошло событие.

Пример:

<div id="menu">
	<button>Кнопка 1</button>
	<button>Кнопка 2</button>
	<button>Кнопка 3</button>
</div>
<script>
	const menu = document.getElementById("menu");
	menu.addEventListener("click", (event) => {
		if (event.target.tagName === "BUTTON") {
			alert(`Вы нажали: ${event.target.textContent}`);
		}
	});
</script>

Преимущества делегирования

• Меньше обработчиков: Экономия ресурсов, так как один обработчик заменяет множество.

• Поддержка динамических элементов: Работает даже с элементами, добавленными после загрузки страницы.

Ограничения делегирования

• Не все события всплывают: Например, события focus и blur не поддерживают всплытие. Для них можно использовать focusin и focusout, которые всплывают.

• Увеличение сложности кода: Нужно писать дополнительную логику для проверки, на каком элементе произошло событие.

Расширенный пример: делегирование в списке

<ul id="list">
	<li>Элемент 1</li>
	<li>Элемент 2</li>
	<li>Элемент 3</li>
</ul>
<script>
	const list = document.getElementById("list");
	list.addEventListener("click", (event) => {
		if (event.target.tagName === "LI") {
			console.log(`Вы выбрали: ${event.target.textContent}`);
		}
	});
	// Добавим новый элемент динамически
	const newItem = document.createElement("li");
	newItem.textContent = "Элемент 4";
	list.appendChild(newItem);
</script>

Как это связано с современными библиотеками?

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

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