JavaScript Academy · Lektion

Grundlagen von addEventListener

Verknüpfen Sie Event-Handler für Ereignisse mit Elementen.

Grundlagen von addEventListener ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Auf Ereignisse reagieren

Ereignisse ermöglichen es Ihrem Code, auf Benutzeraktionen wie Klicks, Tastatureingaben und das Absenden von Formularen zu reagieren. addEventListener ist die Standardmethode zum Registrieren von Listenern.

Grundlegende Syntax

Rufen Sie addEventListener mit einem Ereignisnamen und einer Handler-Funktion auf. Der Handler wird jedes Mal ausgeführt, wenn das Ereignis eintritt.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Benannte Handler

Sie können eine benannte Funktion übergeben. Dadurch bleibt der Code übersichtlich und Sie können den Listener vor allem später wieder entfernen.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Mehrere Listener

Im Gegensatz zur älteren Eigenschaft onclick können Sie mehrere Listener für dasselbe Ereignis registrieren, ohne dass sie sich gegenseitig überschreiben.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Um einen Listener nicht mehr auszuführen, rufen Sie removeEventListener mit demselben Ereignisnamen und derselben Funktionsreferenz auf, die Sie zum Hinzufügen verwendet haben.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Anonyme Funktionen können nicht entfernt werden

Eine Inline-Pfeilfunktion erstellt bei jedem Aufruf eine neue Referenz und kann daher später nicht entfernt werden. Verwenden Sie eine benannte Referenz, wenn Sie den Listener entfernen müssen.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

Die Option once

Durch die Übergabe von { once: true } wird der Listener automatisch entfernt, nachdem er einmal ausgelöst wurde.

btn.addEventListener("click", init, { once: true });

Die Option capture

Standardmäßig werden Listener während der Bubbling-Phase ausgeführt. Mit { capture: true } werden sie stattdessen während der Capturing-Phase ausgeführt.

parent.addEventListener("click", handler, { capture: true });

Die Option passive

{ passive: true } versichert dem Browser, dass Sie preventDefault nicht aufrufen werden, sodass er die Leistung beim Scrollen optimieren kann.

window.addEventListener("scroll", onScroll, { passive: true });

Die Option signal

Mit einem Signal von AbortController können Sie einen oder mehrere Listener durch einen Abbruch entfernen. Das ist praktisch für die Bereinigung.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this in Handlern

In einer Handler-Funktion, die mit function definiert ist, verweist this auf das Element, an dem der Listener registriert ist. Pfeilfunktionen binden this nicht neu.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Schnelltest

Testen Sie die Regeln zum Entfernen.

Zusammenfassung

addEventListener(type, handler, options) registriert Ereignisse und unterstützt mehrere Listener. Entfernen Sie sie mit removeEventListener unter Verwendung derselben Referenz. Bevorzugen Sie daher benannte Funktionen. Nützliche Optionen sind once, capture, passive und signal. In regulären Handlern ist this das Zielelement.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen von addEventListener“ kostenlos?

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

Verknüpfen Sie Event-Handler für Ereignisse mit Elementen. 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 1 von 4.

Wie lange dauert die Lektion „Grundlagen von addEventListener“?

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