Wat is delegeren?

Eventdelegatie is een ontwerppatroon dat het mogelijk maakt dat één event handler de gebeurtenissen van meerdere kindelementen beheert. In plaats van een handler aan elk element toe te wijzen, wordt de handler toegewezen aan het ouderelement. Wanneer een gebeurtenis plaatsvindt op een kindelement, "stijgt" deze (bubbling) naar het ouderelement, waar de handler deze kan onderscheppen en verwerken.

Werking:

• De gebeurtenis wordt gegenereerd op het doel-element (bijvoorbeeld <button>).
• De gebeurtenis verspreidt zich omhoog door de DOM-boom tot de ouderlijke elementen.
• De aan het ouderelement gekoppelde event handler onderschept de gebeurtenis.
• In de handler kan worden bepaald op welk kindelement de gebeurtenis heeft plaatsgevonden met event.target.

Voordelen:

• Prestaties: Minder event handlers, wat het geheugen- en CPU-verbruik vermindert, vooral bij grote lijsten of tabellen.
• Beheer: Het is gemakkelijker om elementen toe te voegen en te verwijderen uit de DOM, omdat je niet constant handlers hoeft te koppelen of los te koppelen.
• Netheid: Minder herhalende code voor het koppelen van handlers.

Voorbeeld:

Stel dat we een lijst van elementen hebben en willen reageren op klikken op elk.

Zonder delegatie zou je een handler aan elk <li> moeten toevoegen:

// Alle `<li>` elementen ophalen
const listItems = document.querySelectorAll('li');

// Handler aan elk element toevoegen
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Geklikt op:', this.textContent);
    });
});

Met delegatie voeg je slechts één handler toe aan de <ul>:

// Ouderlijst ophalen
const list = document.querySelector('ul');

// Handler toevoegen aan de lijst
list.addEventListener('click', function(event) {
    // Controleren of er op een `<li>` is geklikt
    if (event.target.tagName === 'LI') {
        console.log('Geklikt op:', event.target.textContent);
    }
});

In dit voorbeeld gebruiken we event.target om te bepalen welk <li> is geklikt.