Kas yra delegavimas?

Įvykio delegavimas — tai projektavimo šablonas, leidžiantis vienam įvykio apdorotojui valdyti daugelio vaikų elementų įvykius. Vietoje to, kad kiekvienam elementui priskirtumėte apdorotoją, jis priskiriamas tėviniam elementui. Kai įvykis įvyksta vaikų elemente, jis "iškyla" (bubbling) iki tėvo, kurį gali perimti ir apdoroti apdorotojas:

Veikimo principas:

• Įvykis generuojamas tiksliame elemente (pvz., <button>).
• Įvykis plinta aukštyn DOM medyje iki tėvų elementų.
• Tėviniame elemente pritvirtintas įvykio apdorotojas jį perima.
• Apdorotojas gali nustatyti, kuriame vaikų elemente įvykis įvyko, naudodamas event.target.

Privalumai:

• Veiksmingumas: Mažiau įvykio apdorotojų, tai sumažina atminties ir procesoriaus naudojimą, ypač didelių sąrašų ar lentelių atveju.
• Valdymo paprastumas: Lengviau pridėti ir pašalinti elementus iš DOM, nes nereikia nuolat pririšti/atjungti apdorotojų.
• Kodo švarumas: Mažiau pasikartojančio kodo apdorotojų pririšimui.

Pavyzdys:

Tarkime, turime sąrašą elementų ir norime reaguoti į kiekvieno elemento paspaudimą.

Be delegavimo, reikėtų pririšti apdorotoją kiekvienam <li>:

// Gauname visus `<li>` elementus
const listItems = document.querySelectorAll('li');

// Pririšame apdorotoją kiekvienam elementui
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Paspausta:', this.textContent);
    });
});

Su delegavimu, pririšime apdorotoją tik prie <ul>:

// Gauname tėvinį sąrašo elementą
const list = document.querySelector('ul');

// Pririšame apdorotoją prie sąrašo
list.addEventListener('click', function(event) {
    // Patikriname, ar paspausta `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Paspausta:', event.target.textContent);
    }
});

Šiame pavyzdyje naudojame event.target, kad nustatytume, kuris <li> buvo paspaustas.