Что такое делегирование?

Делегирование событий — это шаблон проектирования, который позволяет одному обработчику событий управлять событиями множества дочерних элементов. Вместо назначения обработчика каждому элементу, обработчик назначается родительскому элементу. Ketika событие происходит на дочернем элементе, оно "всплывает" (bubbling) до родителя, где обработчик может его перехватить и обработать.

Принцип работы:

• Событие генерируется на целевом элементе (например, <button>).
• Событие распространяется вверх по DOM-дереву до родительских элементов.
• Обработчик событий, прикрепленный к родительскому элементу, перехватывает событие.
• В обработчике можно определить, на каком именно дочернем элементе произошло событие, используя event.target.

Преимущества:

• Производительность: Меньше обработчиков событий, что снижает потребление памяти и процессора, особенно для больших списков или таблиц.
• Простота управления: Легче добавлять и удалять элементы из DOM, так как нет необходимости постоянно прикреплять/откреплять обработчики.
• Чистота кода: Меньше повторяющегося кода для прикрепления обработчиков.

Пример:

Предположим, у нас есть список элементов, и мы хотим реагировать на клик по каждому элементу.

Без делегирования пришлось бы прикреплять обработчик к каждому <li>:

// Получаем все элементы <li>
const listItems = document.querySelectorAll('li');

// Прикрепляем обработчик к каждому элементу
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Нажали на:', this.textContent);
    });
});

С делегированием мы прикрепим обработчик только к <ul>:

// Получаем родительский список
const list = document.querySelector('ul');

// Прикрепляем обработчик к списку
list.addEventListener('click', function(event) {
    // Проверяем, был ли клик по элементу <li>
    if (event.target.tagName === 'LI') {
        console.log('Нажали на:', event.target.textContent);
    }
});

В этом примере мы используем event.target для определения, какой именно <li> был кликнут.