Event-Behandlung in JavaScript

In JavaScript ermöglicht die Event-Behandlung die Reaktion auf Benutzeraktionen wie Klicks, Tastatureingaben, Mausbewegungen oder das Laden von Webseiten. Jedes dieser Ereignisse kann mit einem Event-Listener abgefangen und verarbeitet werden.

Grundlagen

• Event-ListenerEine Funktion, die auf ein spezifisches Event (Ereignis) wartet und darauf reagiert.
• Event-Objekt:Enthält Details zum ausgelösten Ereignis, wie den Event-Typ und das Ziel des Events.

Event-Listener hinzufügen

Es gibt mehrere Wege, um Event-Listener in JavaScript hinzuzufügen:

HTML-Attribut

<button onclick="alert('Button geklickt!')">Klick mich</button>

DOM-Element-Property

const button = document.getElementById('meinButton');
button.onclick = function() {
  alert('Button geklickt!');
};
                    

addEventListener-Methode

const button = document.getElementById('meinButton');
button.addEventListener('click', function() {
  alert('Button geklickt!');
});
                    

Beispiele:

Klick-Event

document.getElementById('meinButton').addEventListener('click', function() {
    console.log('Button wurde geklickt!');
  });
  

• Elementauswahl: document.getElementById('meinButton') wählt das HTML-Element mit der ID meinButton aus
• Event-Listener hinzufügen: .addEventListener('click', function() {...}) fügt einen Event-Listener hinzu, der auf Klick-Events reagiert.
• Anonyme Funktion: Die Funktion, die als zweiter Parameter übergeben wird, wird ausgeführt, sobald das Klick-Event auftritt.
• Aktion: In der Funktion wird console.log('Button wurde geklickt!') aufgerufen. Dies zeigt eine Nachricht in der Konsole des Browsers an, sobald der Button geklickt wird.

Mausbewegungs-Event

document.addEventListener('mousemove', function(e) {
    console.log("Mausposition: X="$"{e.clientX}, Y="$"{e.clientY}");
  });
  

• Globales Event: Hier wird der Event-Listener an das gesamte Dokument (document) gebunden.
• Event-Objekt:Das e in der Funktion (function(e) {...}) ist das Event-Objekt, das Details zum ausgelösten Event enthält.
• Mausposition:e.clientX und e.clientY geben die X- und Y-Koordinaten der Mausposition relativ zum sichtbaren Bereich des Browsers an.
• Aktion:Bei jeder Bewegung der Maus innerhalb des Dokuments wird die aktuelle Position in der Konsole ausgegeben.

Formular-Submit-Event

document.getElementById('meinFormular').addEventListener('submit', function(e) {
    e.preventDefault(); // Verhindert das Neuladen der Seite
    console.log('Formular gesendet!');
  });
  

• Formularauswahl: Ein Event-Listener wird an ein Formularelement mit der ID meinFormular gebunden.
• Verhindern des Standardverhaltens: e.preventDefault() verhindert das standardmäßige Verhalten des Browsers beim Absenden eines Formulars, nämlich das Neuladen der Seite.
• AktionWenn das Formular abgeschickt wird, erscheint statt des Neuladens der Seite die Nachricht „Formular gesendet!“ in der Konsole.

Tastatureingabe-Event

document.addEventListener('keydown', function(e) {
    console.log("Gedrückte Taste: "$"{e.key}");
  });
  

• Globales Event: Dieser Event-Listener wird für das gesamte Dokument registriert und reagiert auf Tastendrücke.
• Event-Objekt: Das e in function(e) stellt das Event-Objekt dar, das Informationen über das Tastendruck-Event enthält.
• Gedrückte Taste: e.key gibt an, welche Taste gedrückt wurde.
• Aktion: Bei jedem Tastendruck wird die gedrückte Taste in der Browser-Konsole angezeigt.

Event-Behandlung im Window-Objekt und Interaktive Navigation

Das Window-Objekt in JavaScript ist ein zentraler Bestandteil für die Interaktion mit dem Browserfenster und bietet vielfältige Möglichkeiten zur Handhabung von Events und interaktiver Navigation.

Grundlagen

window.eventMethod(function): Ein gängiges Muster, um Event-Listener am Window-Objekt zu registrieren. Hierbei ist `eventMethod` die Methode für ein spezifisches Event, und `function` ist der Event-Handler.

Event-Listener hinzufügen

Die Handhabung von Events auf dem Window-Objekt umfasst typischerweise folgende Schritte:

• Globales Objekt: Das Window-Objekt ist global verfügbar und erfordert keine spezielle Auswahl.
• Event-Listener hinzufügen: Verwende window.eventMethod(function), um auf globale Events wie das Laden der Seite, Größenänderungen des Fensters und Tastaturereignisse zu reagieren.

Beispiele:

Seitenlade-Event

window.onload = function() {
                    document.title = 'Seite geladen';
                };
                

• window.onload: Wird ausgelöst, wenn die gesamte Seite geladen ist. Dieses Event eignet sich, um Initialisierungen durchzuführen.
• Aktion: Ändert den Titel des Dokuments, nachdem die Seite vollständig geladen wurde.

Fenstergrößenänderungs-Event

window.onresize = function() {
                    document.body.style.backgroundColor = 'lightblue';
                };
                

• window.onresize: Wird ausgelöst, wenn die Größe des Browserfensters geändert wird. Dies kann genutzt werden, um das Layout dynamisch anzupassen.
• Aktion: Ändert die Hintergrundfarbe des Body-Elements, wenn die Größe des Fensters geändert wird.

Neues Browserfenster öffnen

window.onclick = function() {
                    window.open('https://www.example.com', 'newWindow', 'width=800,height=600');
                };
                

• window.onclick: Reagiert auf Mausklicks im Browserfenster.
• Aktion: Öffnet ein neues Browserfenster mit einer bestimmten URL und definierten Abmessungen, wenn irgendwo im Fenster geklickt wird.

Tastatureingabe-Event

window.onkeydown = function(e) {
                    if (e.key === 'Enter') {
                    alert('Enter-Taste gedrückt');
                    }
                };
                

• window.onkeydown: Wird ausgelöst, wenn eine Taste gedrückt wird.
• e.key: Überprüft, welche Taste gedrückt wurde.
• Aktion: Zeigt ein Alert-Fenster an, wenn die Enter-Taste gedrückt wird.