Event delegation — это техника, при которой один обработчик события прикрепляется к родительскому элементу вместо добавления отдельных обработчиков к каждому дочернему элементу.
Когда пользователь взаимодействует с дочерним элементом, событие всплывает вверх по дереву DOM к родителю. Обработчик родителя перехватывает событие и использует event.target для определения, какой дочерний элемент его вызвал.
клик на child → событие всплывает вверх → срабатывает обработчик родителя → проверяем event.target
Типичная реализация выглядит так:
document.querySelector('#list').addEventListener('click', (event) => {
if (event.target.matches('li')) {
console.log('List item clicked:', event.target.textContent);
}
});
Event delegation особенно полезна при работе с:
Event delegation требует прикрепления отдельного event listener к каждому child element и опирается на event bubbling для одновременного срабатывания всех их.
Новый — ещё не проверен сообществом
Вы