Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Einführung in Ereignisse und Ereignis-Listener | Ereignisbehandlung und Benutzerinteraktionen in JavaScript
Fortgeschrittene JavaScript-Beherrschung

bookEinführung in Ereignisse und Ereignis-Listener

Was sind Ereignisse in JavaScript?

JavaScript stellt Mechanismen zur Verfügung, um diese Ereignisse zu verarbeiten und spezifischen Code als Reaktion auszuführen, wodurch Webanwendungen interaktiv und dynamisch werden.

Häufige Ereignistypen

Erklärung von addEventListener() und wie man Ereignis-Listener hinzufügt

Um auf Ereignisse in JavaScript zu reagieren, wird ein Ereignis-Listener an ein Element angehängt. Die gebräuchlichste Methode hierfür ist die Funktion addEventListener(), die auf bestimmte Ereignisse wartet und eine Funktion aufruft, wenn das Ereignis eintritt.

element.addEventListener('event', function, useCapture);
  • event: Der Typ des Ereignisses, auf das Sie hören möchten (z. B. 'click', 'submit');
  • function: Die Callback-Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird;
  • useCapture (optional): Ein Boolean, der angibt, ob das Ereignis während der Capturing- oder Bubbling-Phase erfasst werden soll (Standard ist false, d. h. es wird während der Bubbling-Phase zugehört).

Click-Ereignis-Listener

Ein click-Ereignis-Listener wird an den Button angehängt. Beim Klicken wird eine Benachrichtigung ausgelöst.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Der Ereignis-Listener wird an das Element #myButton angehängt. Wenn der Benutzer auf die Schaltfläche klickt, erscheint ein Meldungsfenster mit dem Text "Button clicked!".

Submit-Ereignis-Listener

Ein Ereignis-Listener für das submit-Ereignis wird hinzugefügt, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Ein Ereignis-Listener für das submit-Ereignis des Formulars verhindert die Standardübermittlung mit event.preventDefault(), sodass stattdessen benutzerdefiniertes JavaScript die Daten verarbeitet. Nach dem Absenden wird der eingegebene Name abgerufen und in einem Absatz mit der ID displayName angezeigt.

Keypress-Ereignis

Ein keypress-Ereignis-Listener wird an das Eingabefeld angehängt. Beim Drücken einer Taste wird diese im Absatz angezeigt.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Jedes Mal, wenn eine Taste beim Tippen in das Eingabefeld gedrückt wird, wird die gedrückte Taste in der Konsole protokolliert.

Praktisches Beispiel: Formularvalidierung beim Absenden

Logik für die Formularvalidierung vor dem Absenden des Formulars erstellen.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Der submit-Event-Listener stellt sicher, dass das Formular nicht abgeschickt wird, wenn die erforderlichen Felder leer sind. Sind entweder das Benutzername- oder das Passwortfeld leer, wird das Ereignis am Fortfahren gehindert und eine Fehlermeldung angezeigt.

1. Was ist der Zweck von addEventListener()?

2. Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?

question mark

Was ist der Zweck von addEventListener()?

Select the correct answer

question mark

Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 1

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.22

bookEinführung in Ereignisse und Ereignis-Listener

Swipe um das Menü anzuzeigen

Was sind Ereignisse in JavaScript?

JavaScript stellt Mechanismen zur Verfügung, um diese Ereignisse zu verarbeiten und spezifischen Code als Reaktion auszuführen, wodurch Webanwendungen interaktiv und dynamisch werden.

Häufige Ereignistypen

Erklärung von addEventListener() und wie man Ereignis-Listener hinzufügt

Um auf Ereignisse in JavaScript zu reagieren, wird ein Ereignis-Listener an ein Element angehängt. Die gebräuchlichste Methode hierfür ist die Funktion addEventListener(), die auf bestimmte Ereignisse wartet und eine Funktion aufruft, wenn das Ereignis eintritt.

element.addEventListener('event', function, useCapture);
  • event: Der Typ des Ereignisses, auf das Sie hören möchten (z. B. 'click', 'submit');
  • function: Die Callback-Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird;
  • useCapture (optional): Ein Boolean, der angibt, ob das Ereignis während der Capturing- oder Bubbling-Phase erfasst werden soll (Standard ist false, d. h. es wird während der Bubbling-Phase zugehört).

Click-Ereignis-Listener

Ein click-Ereignis-Listener wird an den Button angehängt. Beim Klicken wird eine Benachrichtigung ausgelöst.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Der Ereignis-Listener wird an das Element #myButton angehängt. Wenn der Benutzer auf die Schaltfläche klickt, erscheint ein Meldungsfenster mit dem Text "Button clicked!".

Submit-Ereignis-Listener

Ein Ereignis-Listener für das submit-Ereignis wird hinzugefügt, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Ein Ereignis-Listener für das submit-Ereignis des Formulars verhindert die Standardübermittlung mit event.preventDefault(), sodass stattdessen benutzerdefiniertes JavaScript die Daten verarbeitet. Nach dem Absenden wird der eingegebene Name abgerufen und in einem Absatz mit der ID displayName angezeigt.

Keypress-Ereignis

Ein keypress-Ereignis-Listener wird an das Eingabefeld angehängt. Beim Drücken einer Taste wird diese im Absatz angezeigt.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Jedes Mal, wenn eine Taste beim Tippen in das Eingabefeld gedrückt wird, wird die gedrückte Taste in der Konsole protokolliert.

Praktisches Beispiel: Formularvalidierung beim Absenden

Logik für die Formularvalidierung vor dem Absenden des Formulars erstellen.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Der submit-Event-Listener stellt sicher, dass das Formular nicht abgeschickt wird, wenn die erforderlichen Felder leer sind. Sind entweder das Benutzername- oder das Passwortfeld leer, wird das Ereignis am Fortfahren gehindert und eine Fehlermeldung angezeigt.

1. Was ist der Zweck von addEventListener()?

2. Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?

question mark

Was ist der Zweck von addEventListener()?

Select the correct answer

question mark

Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 1
some-alt