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

Делегирането на събития е шаблон за дизайн, който позволява на един обработчик на събития да управлява събитията на множество деца елементи. Вместо да задавате обработчик на всеки елемент, той се задава на родителския елемент. Когато се случи събитие на дете, то "излита" (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> е бил кликнат.