JavaScript Academy · Lektion

Benutzerdefinierte Ereignisse

Erstellen und dispatchen Sie eigene Ereignisse.

Benutzerdefinierte Ereignisse ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Über integrierte Events hinaus

Mit dem DOM können Sie mithilfe von CustomEvent eigene Events erstellen und auslösen. Dadurch werden Teile Ihrer App entkoppelt: Eine Komponente kündigt an, dass etwas geschehen ist, und andere können zuhören, ohne eine direkte Referenz zu benötigen.

Ein CustomEvent erstellen

Erstellen Sie eines mit new CustomEvent(name, options). Der Name kann eine beliebige Zeichenfolge sein.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Das Event auslösen

Lösen Sie das Event mit dispatchEvent an einem Ziel aus. Jeder Listener, der am Ziel für diesen Namen registriert ist, wird ausgeführt. Das gilt auch für einen Vorfahren, wenn das Event bubbbelt.

element.dispatchEvent(new CustomEvent("cart:add"));

Auf das Event hören

Hören Sie genau wie bei einem nativen Event mit addEventListener und Ihrem eigenen Namen darauf.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Daten mit detail übergeben

Fügen Sie über die Eigenschaft detail eine Nutzlast hinzu. Listener lesen sie aus event.detail aus.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Die Nutzlast auslesen

Innerhalb des Listeners enthält event.detail den von Ihnen übergebenen Wert. Das kann jeder beliebige Wert sein: ein Objekt, ein Array, eine Zeichenfolge oder eine Zahl.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Das Event bubbeln lassen

Benutzerdefinierte Events bubbeln standardmäßig NICHT. Setzen Sie bubbles: true, damit Vorfahren und delegierte Listener das Event empfangen können.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

Die Option cancelable

Setzen Sie cancelable: true, damit Listener preventDefault() aufrufen können. Der auslösende Code prüft den Rückgabewert von dispatchEvent, um festzustellen, ob das Event abgebrochen wurde.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Ein Muster zur Entkopplung

Mit benutzerdefinierten Events können Module miteinander kommunizieren, ohne einander zu importieren. Eine Protokollierungs- oder Analyseschicht kann auf document app-weite Events empfangen.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Namenskonventionen

Versehen Sie Ihre Event-Namen mit einem Namespace (etwa cart:add oder user:login), um Kollisionen mit nativen Events zu vermeiden und zusammengehörige Events klar zu gruppieren.

Alte und neue Syntax

In älterem Code finden Sie möglicherweise die veraltete API document.createEvent. Bevorzugen Sie den modernen Konstruktor new CustomEvent(...); er ist einfacher und die einzige Form, die Sie heute schreiben sollten.

const evt = new CustomEvent("ready", { detail: 1 });

Schnelltest

Wissenstest zu benutzerdefinierten Events.

Zusammenfassung

Verwenden Sie new CustomEvent(name, { detail, bubbles, cancelable }) und dispatchEvent, um eigene Events zu erstellen. Lesen Sie die Nutzlast über event.detail aus, aktivieren Sie Bubbling für Delegation und verwenden Sie cancelable für abbrechbare Aktionen. Benutzerdefinierte Events entkoppeln Komponenten und ermöglichen einen klaren Publish-Subscribe-Stil.

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefinierte Ereignisse“ kostenlos?

Ja — der vollständige Text von „Benutzerdefinierte Ereignisse“ 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 „Benutzerdefinierte Ereignisse“?

Erstellen und dispatchen Sie eigene Ereignisse. 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 4 von 4.

Wie lange dauert die Lektion „Benutzerdefinierte Ereignisse“?

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