Ce este delegarea?

Delegarea evenimentelor este un model de proiectare care permite unui singur handler de evenimente să gestioneze evenimentele mai multor elemente copil. În loc să atribuiți un handler fiecărui element, handler-ul este atribuit elementului părinte. Când are loc un eveniment pe un element copil, acesta "se propagă" (bubbling) până la părinte, unde handler-ul îl poate intercepta și procesa.

Principiu de funcționare:

• Evenimentul este generat pe elementul țintă (de exemplu, <button>).
• Evenimentul se propagă în sus în arborele DOM până la elementele părinte.
• Handler-ul de evenimente, atașat elementului părinte, intercepta evenimentul.
• În handler, se poate determina pe ce element copil a avut loc evenimentul folosind event.target.

Avantaje:

• Performanță: Mai puțini handler-i de evenimente, ceea ce reduce consumul de memorie și procesor, mai ales pentru liste sau tabele mari.
• Gestionare mai ușoară: Este mai ușor să adăugați și să eliminați elemente din DOM, deoarece nu este necesar să atașați/dezatașați handler-i în mod constant.
• Curățenie în cod: Mai puțin cod repetitiv pentru atașarea handler-ilor.

Exemplu:

Să presupunem că avem o listă de elemente și dorim să reacționăm la clic pe fiecare.

Fără delegare, ar trebui să atașăm un handler fiecărui <li>:

// Obținem toate elementele `<li>`
const listItems = document.querySelectorAll('li');

// Atașăm handler fiecărui element
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Apăsat pe:', this.textContent);
    });
});

Cu delegare, atașăm un singur handler doar la <ul>:

// Obținem lista părinte
const list = document.querySelector('ul');

// Atașăm handler la listă
list.addEventListener('click', function(event) {
    // Verificăm dacă clicul a fost pe un `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Apăsat pe:', event.target.textContent);
    }
});

În acest exemplu, folosim event.target pentru a determina care <li> a fost clicat.