Events in JavaScript: Auf Nutzeraktionen reagieren

Eine Webseite wird erst dann richtig lebendig, wenn sie auf ihre Besucher reagiert. Klickt jemand auf einen Button, tippt etwas in ein Feld oder bewegt die Maus, löst das ein Event aus. In diesem Beitrag lernst du, wie du mit JavaScript auf solche Events lauschst und passend darauf reagierst.

Was ist ein Event?

Ein Event ist ein Ereignis im Browser, etwa ein Klick, ein Tastendruck oder das Absenden eines Formulars. JavaScript erlaubt dir, auf diese Ereignisse zu warten und Code auszuführen, sobald sie eintreten. Die Funktion, die dabei aufgerufen wird, nennt man Event Handler oder Callback.

addEventListener: der moderne Weg

Die wichtigste Methode heißt addEventListener. Du rufst sie auf einem Element auf und übergibst den Namen des Events sowie eine Funktion, die ausgeführt werden soll.

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

button.addEventListener("click", function() {
  console.log("Der Button wurde geklickt!");
});

Sobald der Nutzer auf den Button klickt, läuft die Funktion. Du kannst auch eine Arrow Function verwenden, das ist oft kürzer und übersichtlicher.

Das Event-Objekt

Der Handler bekommt automatisch ein Event-Objekt übergeben. Es enthält viele nützliche Informationen über das Ereignis, zum Beispiel welches Element ausgelöst hat. Über event.target erreichst du genau dieses Element.

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

box.addEventListener("click", (event) => {
  console.log("Geklickt auf:", event.target);
  event.target.style.backgroundColor = "yellow";
});

Eingaben verarbeiten

Neben Klicks sind Eingabe-Events sehr verbreitet. Das input-Event feuert bei jeder Änderung in einem Textfeld. So kannst du live auf das reagieren, was der Nutzer tippt.

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

feld.addEventListener("input", (event) => {
  ausgabe.textContent = "Hallo, " + event.target.value;
});

Mit event.target.value liest du den aktuellen Inhalt des Feldes aus. Das ist die Grundlage für Live-Suchfelder oder sofortige Validierung.

Standardverhalten verhindern

Manche Events haben ein Standardverhalten. Ein Formular lädt zum Beispiel beim Absenden die Seite neu. Oft willst du das verhindern, um die Daten stattdessen mit JavaScript zu verarbeiten. Dafür gibt es preventDefault.

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

formular.addEventListener("submit", (event) => {
  event.preventDefault(); // Seite lädt nicht neu
  console.log("Formular wurde verarbeitet.");
});

Mehrere Elemente, ein Listener

Hast du viele ähnliche Elemente, musst du nicht für jedes einen eigenen Listener schreiben. Du kannst über eine Liste laufen und jedem Element einen Listener geben.

const buttons = document.querySelectorAll(".aktion");

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Aktion ausgelöst:", btn.textContent);
  });
});

Fazit

Events sind der Schlüssel zur Interaktivität. Mit addEventListener lauschst du auf Klicks, Eingaben und Formular-Absendungen. Das Event-Objekt liefert dir Details wie event.target und event.target.value, und mit preventDefault steuerst du das Standardverhalten. Kombiniere dieses Wissen mit der DOM-Manipulation, und du kannst echte interaktive Anwendungen bauen. Probiere ruhig kleine Beispiele wie einen Zähler-Button aus.