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

Question

Делегирование событий — это подход, при котором обработчик события устанавливается на родительском элементе вместо каждого дочернего элемента. Это позволяет обрабатывать события, происходящие на любых дочерних элементах, даже если они добавляются динамически. Например:document.getElementById('parent').addEventListener('click', function(event) {
	if (event.target.matches('.child')) {    
		alert('Дочерний элемент нажат!');    
	} 
});В этом коде обработчик события на родительском элементе реагирует на клики по дочерним элементам с классом .child.

YeaHub · Accepted Answer

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

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

Вы можете установить обработчик события на родительском элементе

:document.getElementById('parent').addEventListener('click', function(event) { if (event.target.matches('.child')) { alert('Дочерний элемент нажат: ' + event.target.textContent); } });В этом коде, когда пользователь нажимает на любой элемент списка с классом .child, обработчик события выполнит код внутри функции. Используя event.target, вы можете получить доступ к конкретному элементу, на который нажали. Этот подход также полезен для динамически созданных элементов. Например, если вы добавите новый элемент списка в DOM, вам не нужно будет добавлять новый обработчик, потому что родительский элемент уже отслеживает клики на своих дочерних элементах. Это упрощает управление событиями и помогает избежать проблем с производительностью, особенно при наличии большого количества элементов на странице.