JavaScript Events

click, submit, input, change, keydown, addEventListener, event object und preventDefault. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Events registrieren und behandeln
• das Event-Objekt nutzen
• Standardverhalten gezielt verhindern

Erklärung

Events sind Ereignisse im Browser: Klicks, Eingaben, Formular-Submits oder Tastendrücke. Mit addEventListener reagierst du darauf, ohne HTML und JavaScript zu vermischen.

Das Event-Objekt enthält Kontext, zum Beispiel das Ziel oder gedrückte Tasten. preventDefault verhindert Standardverhalten, etwa das Absenden eines Formulars.

Beispiele

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

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

Der Listener reagiert auf Klicks.

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Formular wird per JavaScript geprüft");
});

Bei Formularen ist submit wichtiger als nur der Klick auf einen Button.

Typische Fehler

• Event-Handler direkt als onclick ins HTML schreiben.
• Nur Button-Klicks behandeln und Enter im Formular vergessen.
• preventDefault überall einsetzen, ohne Grund.

Best Practices

• Registriere Events in JavaScript-Dateien.
• Nutze submit für Formularlogik.
• Halte Handler klein und rufe bei Bedarf Funktionen auf.

Kleine Übung

Erstelle ein Suchfeld, das bei jeder Eingabe die aktuelle Länge des Suchtexts anzeigt.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

• Vorherige Seite: JavaScript DOM Grundlagen
• Nächste Seite: JavaScript Formulare
• Zur Übersicht
• DOM Grundlagen
• Formulare mit JavaScript