Вопросы React Frontend Developer

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

Пример:

document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

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

document.getElementById('parent').addEventListener('click', function(event) {
	if (event.target.matches('.child')) {    
		alert('Дочерний элемент нажат!');    
	} 
});

В этом коде обработчик события на родительском элементе реагирует на клики по дочерним элементам с классом .child.