Mis on delegeerimine?

Sündmuste edastamine on disainimuster, mis võimaldab ühe sündmuse töötleja hallata paljude lapseelementide sündmusi. Selle asemel, et määrata iga elemendi jaoks eraldi töötleja, määratakse see vanemelemendile. Kui lapsel toimub sündmus, "kerib" see (bubbling) ülespoole DOM-puul kuni vanemani, kus töötleja saab selle kinni püüda ja töödelda:

Tööpõhimõte:

• Sündmus genereeritakse sihtmärgile (näiteks <button>).
• Sündmus levib ülespoole DOM-puul kuni vanematele.
• Vanemelemendile kinnitatud sündmuse töötleja püüab selle kinni.
• Töötleja saab määrata, millisel lapseelemendil sündmus toimus, kasutades event.target.

Eelised:

• Tõhusus: Vähem sündmuse töötlejaid, mis vähendab mälu ja protsessori kasutust, eriti suurte nimekirjade või tabelite puhul.
• Hallamise lihtsus: Elementide lisamine ja eemaldamine DOM-ist on lihtsam, kuna ei ole vaja pidevalt töötlejaid siduda/eemaldada.
• Koodi puhtus: Vähem korduvat koodi töötleja sidumiseks.

Näide:

Oletame, et meil on elementide nimekiri ja soovime reageerida iga elemendi klõpsamisele.

Ilma edastamiseta tuleks siduda töötleja iga <li> elemendile:

// Saame kõik `<li>` elemendid
const listItems = document.querySelectorAll('li');

// Sidume töötleja iga elemendiga
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Vajutatud:', this.textContent);
    });
});

Edastamisega sidume töötleja ainult <ul>-ile:

// Saame vanema nimekirja elemendi
const list = document.querySelector('ul');

// Sidume töötleja nimekirjale
list.addEventListener('click', function(event) {
    // Kontrollime, kas klõps oli `<li>`-l
    if (event.target.tagName === 'LI') {
        console.log('Vajutatud:', event.target.textContent);
    }
});

Selles näites kasutame event.target, et määrata, milline <li> oli klikitud.