Was ist Delegation?

Das Delegieren von Ereignissen ist ein Entwurfsmuster, das es einem einzigen Ereignis-Handler ermöglicht, die Ereignisse vieler Kind-Elemente zu verwalten. Anstatt für jedes Element einen Handler zuzuweisen, wird der Handler dem Elternelement zugewiesen. Wenn ein Ereignis auf einem Kind-Element auftritt, "blubbert" es (bubbling) nach oben zum Elternteil, wo der Handler es abfangen und verarbeiten kann.

Funktionsprinzip:

• Das Ereignis wird auf dem Ziel-Element ausgelöst (z.B. <button>).
• Das Ereignis breitet sich nach oben im DOM-Baum bis zu den Elternelementen aus.
• Der an das Elternelement angehängte Ereignis-Handler fängt das Ereignis ab.
• Im Handler kann man mit event.target bestimmen, auf welches Kind-Element das Ereignis gefallen ist.

Vorteile:

• Leistung: Weniger Ereignis-Handler, was den Speicher- und CPU-Verbrauch reduziert, besonders bei großen Listen oder Tabellen.
• Verwaltungsvereinfachung: Es ist einfacher, Elemente zum DOM hinzuzufügen oder daraus zu entfernen, da keine ständigen An- und Abhängungen von Handlern notwendig sind.
• Sauberer Code: Weniger wiederholter Code beim Anhängen von Handlern.

Beispiel:

Angenommen, wir haben eine Liste von Elementen und möchten auf Klicks auf jedes reagieren.

Ohne Delegation müsste man einen Handler an jedes <li> anhängen:

// Alle `<li>`-Elemente holen
const listItems = document.querySelectorAll('li');

// Handler an jedes Element anhängen
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Geklickt auf:', this.textContent);
    });
});

Mit Delegation hängt man nur einen Handler an das <ul>:

// Elternelement `<ul>` holen
const list = document.querySelector('ul');

// Handler an `<ul>` anhängen
list.addEventListener('click', function(event) {
    // Prüfen, ob auf `<li>` geklickt wurde
    if (event.target.tagName === 'LI') {
        console.log('Geklickt auf:', event.target.textContent);
    }
});

In diesem Beispiel verwenden wir event.target, um zu bestimmen, welches <li> geklickt wurde.