Event Delegation, или делегирование событий, — это техника в JavaScript, которая позволяет обрабатывать события на множестве дочерних элементов, устанавливая обработчик события только на одном родительском элементе. Это возможно благодаря механизму всплытия событий (event bubbling), при котором событие, произошедшее на дочернем элементе, поднимается вверх по DOM-дереву и может быть перехвачено на любом уровне.

Допустим, у вас есть список <ul> с сотней элементов <li>. Вместо того чтобы навешивать click-обработчик на каждый <li> отдельно, вы можете навесить один обработчик на <ul>, и с помощью event.target определить, по какому именно элементу был произведён клик.

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

• Производительность: Один обработчик вместо сотен снижает нагрузку на браузер.
• Гибкость: Поддержка динамически добавленных элементов без необходимости дополнительных обработчиков.
• Упрощение кода: Меньше повторений, легче поддерживать и масштабировать.

Пример:

document.querySelector('#list').addEventListener('click', function(event) {

if (event.target.tagName === 'LI') {

alert('Вы кликнули по элементу: ' + event.target.textContent);

}

});

В этом примере родительский элемент #list (например, <ul id="list">) перехватывает клики по своим <li>-элементам. Такая техника особенно полезна при создании интерактивных интерфейсов, где элементы могут часто добавляться или удаляться.