JavaScript Academy · Lektion

Das Event-Delegation-Muster

Behandeln Sie viele Ereignisse von Kindelementen mit einem Listener am Elternelement.

Das Event-Delegation-Muster ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Ein Listener für alle

Eventdelegation bedeutet, einen einzelnen Listener an einem gemeinsamen übergeordneten Element anzubringen, statt viele Listener für einzelne untergeordnete Elemente zu verwenden. Da Events bubbeln, empfängt das übergeordnete Element Klicks von all seinen Nachfahren.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Der naive Ansatz

Ohne Delegation würden Sie alle Elemente durchlaufen und für jedes einen Handler anbringen. Das ist ineffizient: Es benötigt mehr Speicher und funktioniert nicht für Elemente, die später hinzugefügt werden.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

Der Delegationsansatz

Bringen Sie stattdessen einen Listener am übergeordneten Element an und untersuchen Sie event.target, um herauszufinden, welches untergeordnete Element angeklickt wurde.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Das richtige Ziel ermitteln

Der Klick kann auf einem verschachtelten Element landen. Verwenden Sie event.target.closest(selector), um nach oben zu gehen und den relevanten übergeordneten Vorfahren zu finden, der zu Ihrem Selektor passt.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Mit einer Prüfung absichern

Sichern Sie sich immer gegen Klicks ab, die nicht passen. Der vorzeitige Ausstieg mit if (!item) return; verhindert, dass Ihr Handler abstürzt, wenn die Benutzerin oder der Benutzer auf einen Innenabstand oder eine Lücke im Container klickt.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Datenattribute verwenden

Ein häufig verwendetes Muster speichert eine ID oder Aktion mit einem data-*-Attribut in jedem Element. Der delegierte Handler liest sie aus dem passenden Element aus.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Nach Aktion verzweigen

Geben Sie bei Symbolleisten mit vielen Schaltflächen jeder Schaltfläche ein data-action und verzweigen Sie anhand dieses Werts. Ein Listener verarbeitet so jede Schaltfläche.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Warum das skalierbar ist

Bei einer Delegation benötigt eine Liste mit 1000 Zeilen nur einen Listener statt 1000. Das spart Speicher, beschleunigt die Einrichtung und macht beim Ändern der Zeilen keine Bereinigungsschleife erforderlich.

Hinweis zur Leistung

Delegation verursacht einen kleinen zusätzlichen Aufwand: Bei jedem passenden Event wird Ihr Handler ausgeführt, der anschließend filtert. Für die meisten Apps ist das im Vergleich zu den Einsparungen vernachlässigbar. Vermeiden Sie jedoch delegierte Listener an document für sehr häufige Events wie mousemove.

Den Container auswählen

Wählen Sie den nächsten stabilen übergeordneten Vorfahren aus, der alle Ziele enthält. Die Delegation an einen eng begrenzten Container (die Liste selbst) ist besser als die Delegation an document, weil dadurch weniger unabhängige Events Ihren Handler auslösen.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Mit closest kombinieren

closest() ist das Herzstück der Delegation. Die Methode gibt das Element selbst zurück, wenn es passt, andernfalls den nächsten passenden Vorfahren oder null. Dadurch lässt sich auch verschachteltes Markup sicher per Delegation verarbeiten.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Schnelltest

Warum sollten Sie Eventdelegation verwenden?

Zusammenfassung

Bei der Eventdelegation wird ein Listener an einem übergeordneten Element angebracht, der mithilfe von Bubbling alle untergeordneten Elemente verarbeitet. Verwenden Sie e.target.closest(selector), um das relevante Element zu finden, sichern Sie den Handler mit einem vorzeitigen Ausstieg ab und lesen Sie data-*-Attribute aus, um Aktionen auszuführen. Dieses Muster skaliert auf sehr große Listen und ist der Standard für dynamische Benutzeroberflächen.

Häufig gestellte Fragen

Ist die Lektion „Das Event-Delegation-Muster“ kostenlos?

Ja — der vollständige Text von „Das Event-Delegation-Muster“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das Event-Delegation-Muster“?

Behandeln Sie viele Ereignisse von Kindelementen mit einem Listener am Elternelement. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Das Event-Delegation-Muster“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy