JavaScript Academy · Lektion

Dynamische Listen mit Delegation

Verwalten Sie Ereignisse für zur Laufzeit hinzugefügte Elemente.

Dynamische Listen mit Delegation ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Das Problem dynamischer Elemente

Wenn Sie Listener direkt an Elementen anbringen, hat jedes Element, das nach der Einrichtung zum DOM hinzugefügt wird, keinen Listener. Delegation löst dieses Problem, weil der Listener des übergeordneten Elements auch Events zukünftiger untergeordneter Elemente abfängt.

Direkte Listener funktionieren nicht

Hier wird ein Listener an vorhandene Elemente angefügt. Ein neu angefügtes Element erhält keinen Listener und bleibt ohne Funktion.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

Delegation funktioniert sofort

Mit einem delegierten Listener am übergeordneten Element wird das neue Element automatisch verarbeitet. Nach jedem Einfügen ist keine erneute Bindung erforderlich.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Elemente hinzufügen

Erstellen Sie neue Elemente und fügen Sie sie an. Da das übergeordnete Element bereits Delegation verwendet, sind sie sofort nach ihrem Erscheinen interaktiv.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Elemente entfernen

Auch das Löschen ist unkompliziert. Ein delegierter Handler kann eine Löschen-Schaltfläche innerhalb der Zeile erkennen und die Zeile entfernen.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Unteraktionen unterscheiden

Eine Zeile kann mehrere interaktive Bereiche enthalten. Verwenden Sie matches() oder closest(), um festzustellen, welcher Bereich angeklickt wurde, und verzweigen Sie anschließend entsprechend.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Aus Daten rendern

Ein häufig verwendetes Muster: Speichern Sie den Zustand in einem Array, rendern Sie daraus die Zeilen und delegieren Sie die Klicks. Beim erneuten Rendern werden die untergeordneten Elemente ersetzt, der einzelne Listener am übergeordneten Element bleibt jedoch unverändert erhalten.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Keine Probleme mit der Bereinigung

Bei Listenern für einzelne Elemente müssen Sie daran denken, vor dem Löschen von Knoten removeEventListener aufzurufen, um Leaks zu vermeiden. Delegation nimmt Ihnen diese Aufgabe ab: Beim Löschen eines untergeordneten Elements bleibt kein verwaister Listener zurück.

Klassen umschalten

Delegation lässt sich gut mit dem Umschalten von Klassen für Auswahlzustände kombinieren. Der Handler findet die Zeile und schaltet eine Klasse um.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Eine stabile Identität auslesen

Da DOM-Knoten beim erneuten Rendern ersetzt werden, sollten Sie niemals Referenzen auf sie speichern. Speichern Sie stattdessen eine stabile ID in data-id und suchen Sie innerhalb des Handlers anhand dieser ID die Daten in Ihrem Datenmodell.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Auch Input-Events

Delegation ist nicht auf Klicks beschränkt. Sie können auf dieselbe Weise input- oder change-Events für dynamisch hinzugefügte Formularfelder delegieren.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Schnelltest

Dynamische Listen und Delegation.

Zusammenfassung

Delegation spielt ihre Stärken bei dynamischen Listen aus: Ein Listener am übergeordneten Element verarbeitet aktuelle und zukünftige untergeordnete Elemente, bleibt beim erneuten Rendern erhalten und benötigt keine Bereinigung einzelner Knoten. Verwenden Sie matches() und closest(), um anhand von Unteraktionen zu verzweigen, und speichern Sie stabile IDs in data-*, damit Handler Ihr Datenmodell finden können.

Häufig gestellte Fragen

Ist die Lektion „Dynamische Listen mit Delegation“ kostenlos?

Ja — der vollständige Text von „Dynamische Listen mit Delegation“ 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 „Dynamische Listen mit Delegation“?

Verwalten Sie Ereignisse für zur Laufzeit hinzugefügte Elemente. 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 3 von 4.

Wie lange dauert die Lektion „Dynamische Listen mit Delegation“?

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