Kas ir deleģēšana?

Notikumu deleģēšana ir projektēšanas paraugs, kas ļauj vienam notikumu apstrādātājam pārvaldīt daudzu bērnu elementu notikumus. Tā vietā, lai katram elementam piešķirtu apstrādātāju, tas tiek piešķirts vecāku elementam. Kad notikums notiek bērna elementā, tas "uzlec" (bubbling) līdz vecākiem, kur apstrādātājs to var pārņemt un apstrādāt:

Darbības princips:

• Notikums tiek ģenerēts mērķa elementā (piemēram, <button>).
• Notikums izplatās augšup pa DOM koku līdz vecāku elementiem.
• Notikuma apstrādātājs, kas ir pievienots vecāku elementam, to pārņem.
• Apstrādātājs var noteikt, kurā bērnu elementā notikums notika, izmantojot event.target.

Priekšrocības:

• Efektivitāte: Mazāk notikumu apstrādātāju, kas samazina atmiņas un procesora lietojumu, īpaši lielu sarakstu vai tabulu gadījumā.
• Vadības vienkāršība: Ir vieglāk pievienot un noņemt elementus no DOM, jo nav nepieciešams pastāvīgi pievienot/atvienot apstrādātājus.
• Koda tīrība: Mazāk atkārtojoša koda apstrādātāju pievienošanai.

Piemērs:

Pieņemsim, ka mums ir elementu saraksts, un mēs vēlamies reaģēt uz katra elementa klikšķi.

Bez deleģēšanas būtu jāpievieno apstrādātājs katram <li>:

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

// Pievienojam apstrādātāju katram elementam
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Nospiežot:', this.textContent);
    });
});

Ar deleģēšanu mēs pievienosim apstrādātāju tikai pie <ul>:

// Iegūstam vecāku saraksta elementu
const list = document.querySelector('ul');

// Pievienojam apstrādātāju sarakstam
list.addEventListener('click', function(event) {
    // Pārbaudām, vai klikšķis notika uz `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Nospiežot:', event.target.textContent);
    }
});

Šajā piemērā mēs izmantojam event.target, lai noteiktu, kurš <li> tika klikšķināts.