Šta je delegiranje?

Delegiranje događaja je obrazac dizajna koji omogućava da jedan rukovalac događaja upravlja događajima više dece elemenata. Umesto da dodeljujete rukovalac svakom elementu, on se dodeljuje roditeljskom elementu. Kada se dogodi događaj na dečjem elementu, on "bubbluje" (bubbling) prema roditelju, gde ga rukovalac može uhvatiti i obraditi.

Princip rada:

• Događaj se generiše na ciljanom elementu (npr. <button>).
• Događaj se širi naviše kroz DOM stablo do roditeljskih elemenata.
• Rukovalac događaja, povezan sa roditeljskim elementom, hvata događaj.
• U rukovaocu, može se odrediti na kojem dečjem elementu se dogodio događaj koristeći event.target.

Prednosti:

• Performanse: Manje rukovalaca događaja, što smanjuje potrošnju memorije i CPU-a, posebno za velike liste ili tabele.
• Lako upravljanje: Lakše je dodavati i uklanjati elemente iz DOM-a, jer nije potrebno stalno povezivati/odvajati rukovaoce.
• Čistoća koda: Manje ponovljenog koda za povezivanje rukovalaca.

Primer:

Pretpostavimo da imamo listu elemenata i želimo da reagujemo na klik na svaki od njih.

Bez delegacije, morali bismo da povežemo rukovaoca sa svakim <li>:

// Dobijamo sve `<li>` elemente
const listItems = document.querySelectorAll('li');

// Povezujemo rukovaoca sa svakim elementom
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Kliknuto na:', this.textContent);
    });
});

Sa delegacijom, povezujemo rukovaoca samo sa <ul>:

// Dobijamo roditeljski spisak
const list = document.querySelector('ul');

// Povezujemo rukovaoca sa spiskom
list.addEventListener('click', function(event) {
    // Proveravamo da li je kliknuto na `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Kliknuto na:', event.target.textContent);
    }
});

U ovom primeru koristimo event.target da odredimo koji <li> je kliknut.