Skip to main content

Ereignisse mit `addEventListener()`

Lernziele

Nach dieser Lektion kannst du:

  • auf Benutzeraktionen wie Klicks und Eingaben reagieren,
  • mit addEventListener() Ereignisse überwachen,
  • Funktionen als Reaktion auf Ereignisse ausführen,
  • Informationen über das Ereignis mit dem Event-Objekt nutzen,
  • typische Fehler beim Arbeiten mit Ereignissen vermeiden.

Was sind Ereignisse?

Eine Webseite reagiert nicht von allein auf Benutzerinnen und Benutzer. Erst durch JavaScript kann sie auf Aktionen eingehen.

Solche Aktionen heißen Ereignisse oder auf Englisch Events. Beispiele sind:

  • Ein Button wird angeklickt: click
  • Text wird in ein Eingabefeld geschrieben: input
  • Ein Formular wird abgeschickt: submit
  • Die Maus bewegt sich über ein Element: mouseover
  • Eine Taste wird gedrückt: keydown

Mit addEventListener() sagst du JavaScript:

„Wenn dieses Ereignis passiert, führe eine bestimmte Funktion aus.“

Die Grundstruktur von addEventListener()

Die Methode wird auf einem HTML-Element aufgerufen:

element.addEventListener("ereignis", funktion);

Dabei bedeutet:

  • element: Das ausgewählte HTML-Element, zum Beispiel ein Button.
  • "ereignis": Der Name des Ereignisses als String, zum Beispiel "click".
  • funktion: Der Code, der beim Ereignis ausgeführt werden soll.

Ein einfaches Beispiel:

const button = document.querySelector("button");

button.addEventListener("click", begruessen);

function begruessen() {
  console.log("Der Button wurde angeklickt.");
}

Sobald jemand auf den Button klickt, erscheint die Nachricht in der Browser-Konsole.

Ein Button reagiert auf einen Klick

Erstelle zunächst eine HTML-Datei mit einem Button und einem Absatz:

<button id="hallo-button">Begrüßung anzeigen</button>
<p id="ausgabe">Noch kein Klick.</p>

Nun wählst du beide Elemente mit JavaScript aus:

const halloButton = document.querySelector("#hallo-button");
const ausgabe = document.querySelector("#ausgabe");

Danach fügst du den Event Listener hinzu:

halloButton.addEventListener("click", zeigeBegruessung);

function zeigeBegruessung() {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
}

Ablauf:

  1. JavaScript sucht den Button über #hallo-button.
  2. JavaScript wartet auf einen Klick auf diesen Button.
  3. Beim Klick wird zeigeBegruessung() ausgeführt.
  4. Der Text im Absatz wird verändert.

Funktion übergeben, nicht sofort aufrufen

Ein häufiger Anfängerfehler sieht so aus:

halloButton.addEventListener("click", zeigeBegruessung());

Das ist falsch, weil die Funktion durch die Klammern sofort ausgeführt wird — also schon beim Laden der Seite.

Richtig ist:

halloButton.addEventListener("click", zeigeBegruessung);

Hier übergibst du die Funktion als Anweisung für später. JavaScript führt sie erst aus, wenn das Ereignis eintritt.

Merke: Bei addEventListener() steht der Funktionsname normalerweise ohne Klammern.

Eine anonyme Funktion verwenden

Du kannst die Funktion auch direkt in addEventListener() schreiben. Das nennt man eine anonyme Funktion, weil sie keinen eigenen Namen hat.

halloButton.addEventListener("click", function () {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Oft wird dafür die kürzere Pfeilfunktion verwendet:

halloButton.addEventListener("click", () => {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Für kurze Reaktionen ist diese Schreibweise sehr praktisch.

const button = document.querySelector("#hallo-button");

button.addEventListener("click", () => {
  console.log("Klick erkannt!");
});

Wenn dieselbe Funktion an mehreren Stellen gebraucht wird oder der Code länger wird, ist eine benannte Funktion meist übersichtlicher.

Einen Zähler bauen

Ein Klickzähler ist ein gutes erstes Beispiel für ein interaktives Element.

HTML

<button id="zaehl-button">Klick mich</button>
<p>Anzahl der Klicks: <span id="anzahl">0</span></p>

JavaScript

const zaehlButton = document.querySelector("#zaehl-button");
const anzahlAnzeige = document.querySelector("#anzahl");

let anzahlKlicks = 0;

zaehlButton.addEventListener("click", () => {
  anzahlKlicks = anzahlKlicks + 1;
  anzahlAnzeige.textContent = anzahlKlicks;
});

Die Variable anzahlKlicks speichert den aktuellen Wert. Bei jedem Klick wird sie um eins erhöht und anschließend im <span> angezeigt.

Du kannst die Kurzschreibweise ++ verwenden:

anzahlKlicks++;

Die Funktion könnte dann so aussehen:

zaehlButton.addEventListener("click", () => {
  anzahlKlicks++;
  anzahlAnzeige.textContent = anzahlKlicks;
});

Auf Eingaben reagieren

Nicht nur Klicks können Ereignisse auslösen. Mit dem Ereignis input reagiert JavaScript auf jede Änderung in einem Eingabefeld.

HTML

<label for="name">Wie heißt du?</label>
<input id="name" type="text" placeholder="Dein Name">
<p id="begrüßung"></p>

JavaScript

const namensfeld = document.querySelector("#name");
const begruessung = document.querySelector("#begrüßung");

namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  begruessung.textContent = "Hallo, " + name + "!";
});

Die Eigenschaft .value liefert den aktuellen Inhalt eines Eingabefelds.

Wenn im Feld noch nichts steht, wäre die Ausgabe „Hallo, !“. Das kannst du mit einer Bedingung verbessern:

namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  if (name === "") {
    begruessung.textContent = "";
  } else {
    begruessung.textContent = "Hallo, " + name + "!";
  }
});

Das Event-Objekt

Wenn ein Ereignis passiert, übergibt JavaScript zusätzliche Informationen an deine Funktion. Diese Informationen stecken im Event-Objekt.

button.addEventListener("click", (event) => {
  console.log(event);
});

Der Name event ist frei wählbar. Häufig werden auch e oder ereignis verwendet:

button.addEventListener("click", (e) => {
  console.log(e);
});

Für Anfängerinnen und Anfänger ist event meist am verständlichsten.

Das Element herausfinden, das geklickt wurde

Mit event.target erfährst du, welches Element das Ereignis ausgelöst hat.

<button class="farbe-button">Blau</button>
<button class="farbe-button">Grün</button>
<button class="farbe-button">Rot</button>

const farbButtons = document.querySelectorAll(".farbe-button");

farbButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(event.target.textContent);
  });
});

Klickst du auf „Grün“, gibt die Konsole aus:

Grün

event.target ist also das Element, auf das tatsächlich geklickt wurde.

Ein Formular abschicken

Bei Formularen ist das Ereignis submit besonders wichtig.

HTML

<form id="kontakt-formular">
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" required>
  <button type="submit">Absenden</button>
</form>

<p id="meldung"></p>

JavaScript

const formular = document.querySelector("#kontakt-formular");
const meldung = document.querySelector("#meldung");

formular.addEventListener("submit", (event) => {
  event.preventDefault();

  meldung.textContent = "Vielen Dank! Das Formular wurde verarbeitet.";
});

Normalerweise lädt der Browser nach dem Absenden eines Formulars die Seite neu oder wechselt zu einer anderen Adresse. Mit

event.preventDefault();

verhinderst du dieses Standardverhalten.

Das ist hilfreich, wenn JavaScript die Eingaben zunächst prüfen oder direkt auf der Seite verarbeiten soll.

Wichtig: Höre bei Formularen auf submit, nicht nur auf den Klick des Absende-Buttons. So funktioniert die Verarbeitung auch, wenn jemand die Eingabetaste drückt.

Klassen beim Klick umschalten

Mit einem Ereignis kannst du auch das Aussehen eines Elements verändern.

HTML

<button id="design-button">Design wechseln</button>

<p id="text">Dieser Text kann hervorgehoben werden.</p>

CSS

.hervorgehoben {
  background-color: gold;
  color: black;
  font-weight: bold;
  padding: 8px;
}

JavaScript

const designButton = document.querySelector("#design-button");
const text = document.querySelector("#text");

designButton.addEventListener("click", () => {
  text.classList.toggle("hervorgehoben");
});

classList.toggle() funktioniert in zwei Richtungen:

  • Ist die Klasse noch nicht vorhanden, wird sie hinzugefügt.
  • Ist die Klasse bereits vorhanden, wird sie entfernt.

Jeder Klick schaltet das Aussehen also um.

Mehrere Ereignisse für ein Element

Ein Element kann auf mehrere Ereignisse reagieren.

const feld = document.querySelector("#name");

feld.addEventListener("focus", () => {
  console.log("Das Eingabefeld ist aktiv.");
});

feld.addEventListener("blur", () => {
  console.log("Das Eingabefeld wurde verlassen.");
});

Dabei bedeutet:

  • focus: Das Element erhält den Fokus, etwa durch einen Klick ins Feld.
  • blur: Das Element verliert den Fokus, etwa durch einen Klick außerhalb des Felds.

Du kannst auch mehrere Listener für dasselbe Ereignis registrieren:

button.addEventListener("click", () => {
  console.log("Erste Reaktion");
});

button.addEventListener("click", () => {
  console.log("Zweite Reaktion");
});

Bei einem Klick werden beide Funktionen ausgeführt.

Häufige Ereignisse im Überblick

Ereignis Wann passiert es? Typisches Beispiel
click Ein Element wird angeklickt Button bedienen
input Der Inhalt eines Felds ändert sich Text beim Tippen anzeigen
change Ein Wert wurde geändert und bestätigt Auswahlfeld auswerten
submit Ein Formular wird abgeschickt Formulardaten prüfen
keydown Eine Taste wird gedrückt Tastenkürzel erkennen
focus Ein Element wird aktiv Eingabefeld hervorheben
blur Ein Element verliert den Fokus Eingabe prüfen
mouseover Die Maus fährt über ein Element Hinweis anzeigen

Typische Fehler und ihre Lösungen

Das Element wurde nicht gefunden

const button = document.querySelector("#mein-button");

button.addEventListener("click", () => {
  console.log("Hallo");
});

Wenn es kein Element mit der ID mein-button gibt, enthält button den Wert null. Dann entsteht ein Fehler.

Prüfe deshalb:

  • Stimmt die ID im HTML genau mit dem Selektor überein?
  • Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine gute Lösung ist, das Script mit defer einzubinden:

<script src="script.js" defer></script>

Mit defer wartet der Browser, bis das HTML vollständig eingelesen wurde.

Das Ereignis steht nicht in Anführungszeichen

Falsch:

button.addEventListener(click, starte);

Richtig:

button.addEventListener("click", starte);

Der Ereignisname ist ein String und braucht deshalb Anführungszeichen.

Die Funktion wird zu früh ausgeführt

Falsch:

button.addEventListener("click", starte());

Richtig:

button.addEventListener("click", starte);

Die Klammern rufen eine Funktion sofort auf. Ohne Klammern wird die Funktion für den späteren Klick gespeichert.

preventDefault() fehlt beim Formular

Wenn sich die Seite beim Absenden direkt neu lädt, fehlt wahrscheinlich diese Zeile:

event.preventDefault();

Sie muss innerhalb der Funktion für das submit-Ereignis stehen.

Praxisbeispiel: Eine Aufgabenliste mit Rückmeldung

Dieses kleine Beispiel verbindet Klicks, Eingaben und Bedingungen.

HTML

<label for="aufgabe">Neue Aufgabe</label>
<input id="aufgabe" type="text" placeholder="Zum Beispiel: JavaScript üben">

<button id="hinzufuegen">Hinzufügen</button>

<p id="meldung"></p>
<ul id="liste"></ul>

JavaScript

const aufgabenfeld = document.querySelector("#aufgabe");
const hinzufuegenButton = document.querySelector("#hinzufuegen");
const meldung = document.querySelector("#meldung");
const liste = document.querySelector("#liste");

hinzufuegenButton.addEventListener("click", () => {
  const aufgabe = aufgabenfeld.value;

  if (aufgabe === "") {
    meldung.textContent = "Bitte gib zuerst eine Aufgabe ein.";
  } else {
    const listenElement = document.createElement("li");

    listenElement.textContent = aufgabe;
    liste.append(listenElement);

    meldung.textContent = "Aufgabe wurde hinzugefügt.";
    aufgabenfeld.value = "";
  }
});

Was passiert hier?

  1. Beim Klick liest JavaScript den Inhalt des Eingabefelds aus.
  2. Ist das Feld leer, erscheint eine Hinweismeldung.
  3. Andernfalls wird ein neues <li>-Element erstellt.
  4. Die Aufgabe wird in die Liste eingefügt.
  5. Das Eingabefeld wird wieder geleert.

document.createElement("li") erstellt ein neues HTML-Element. Mit .append() wird es an die Liste angehängt.

Übung

Erstelle einen Button, der einen Absatz ein- und ausblendet.

Vorgabe: HTML

<button id="info-button">Information anzeigen</button>

<p id="info-text">
  JavaScript kann auf Benutzeraktionen reagieren.
</p>

Vorgabe: CSS

.versteckt {
  display: none;
}

Aufgabe

  1. Wähle Button und Absatz mit querySelector() aus.
  2. Reagiere auf das click-Ereignis des Buttons.
  3. Schalte beim Klick die Klasse versteckt am Absatz um.
  4. Ändere den Button-Text passend:
    • Ist der Text sichtbar, soll der Button „Information ausblenden“ zeigen.
    • Ist der Text versteckt, soll der Button „Information anzeigen“ zeigen.

Mögliche Lösung

const infoButton = document.querySelector("#info-button");
const infoText = document.querySelector("#info-text");

infoButton.addEventListener("click", () => {
  infoText.classList.toggle("versteckt");

  if (infoText.classList.contains("versteckt")) {
    infoButton.textContent = "Information anzeigen";
  } else {
    infoButton.textContent = "Information ausblenden";
  }
});

classList.contains("versteckt") prüft, ob ein Element diese Klasse gerade besitzt. Das Ergebnis ist entweder true oder false.

Zusammenfassung

Mit addEventListener() machst du Webseiten interaktiv:

element.addEventListener("click", () => {
  // Code für den Klick
});

Wichtige Punkte sind:

  • Ereignisse wie click, input und submit lösen JavaScript-Code aus.
  • Die Funktion wird ohne Klammern an addEventListener() übergeben.
  • Mit dem Event-Objekt erhältst du zusätzliche Informationen, etwa über event.target.
  • event.preventDefault() verhindert das Standardverhalten, zum Beispiel beim Absenden eines Formulars.
  • Mit classList.toggle() kannst du CSS-Klassen bequem ein- und ausschalten.

Damit kennst du die zentrale Verbindung zwischen Benutzeraktionen und JavaScript-Code — eine wichtige Grundlage für jede interaktive Webseite.

Back to top