Event Delegation in JavaScript – ein Listener statt hundert

Wenn ich eine Liste mit vielen Buttons habe, hänge ich nicht an jeden einzelnen einen Listener. Stattdessen nutze ich Event Delegation: einen Listener am gemeinsamen Container, der das Klick-Ereignis abfängt, wenn es nach oben „blubbert".

Das Problem

// Bei 200 Zeilen: 200 Listener, und für nachgeladene Zeilen gar keine
document.querySelectorAll(".del-btn").forEach(btn => {
  btn.addEventListener("click", handleDelete);
});

Die Lösung: ein Listener am Elternelement

const liste = document.querySelector("#todo-liste");

liste.addEventListener("click", (e) => {
  const btn = e.target.closest(".del-btn");   // wurde ein Löschen-Button (oder sein Kind) geklickt?
  if (!btn) return;                            // sonst ignorieren

  const id = btn.dataset.id;
  deleteTodo(id);
});

Der Trick steckt in e.target.closest(".del-btn"): e.target ist das genau angeklickte Element (evtl. ein Icon im Button), und closest sucht von dort nach oben den passenden Button. Ist keiner dabei, brichst du ab.

Warum das besser ist

• Weniger Speicher: ein Listener statt hunderten.
• Funktioniert für neue Elemente: Fügst du später per JavaScript eine Zeile hinzu, ist sie sofort „verkabelt" – du musst keinen Listener nachrüsten.
• Weniger Aufräumarbeit: nur ein Listener zum Entfernen.

Ein Hinweis: Für Events, die nicht blubbern (focus, blur, mouseenter), funktioniert Delegation so nicht – dort nimmst du focusin/focusout oder die Capture-Phase.

Event Delegation hält meine interaktiven Seiten schlank und dynamisch. Mehr Snippets findest du auf code.bymw.de.

Quellen

• EventTarget.addEventListener — MDN
• Event.target — MDN