Mit Events arbeiten
Events sind der Schlüssel zu interaktiven Webseiten. Sie ermöglichen es Ihrem JavaScript-Code, auf Benutzerinteraktionen wie Mausklicks, Tastatureingaben oder Formularübermittlungen zu reagieren.
Was sind Events?
Abschnitt betitelt „Was sind Events?“Events sind Signale, die vom Browser gesendet werden, wenn etwas passiert:
- Ein Benutzer klickt auf einen Button
- Eine Seite wird geladen
- Ein Formular wird abgeschickt
- Eine Taste wird gedrückt
- Die Maus bewegt sich über ein Element
Event-Handler hinzufügen
Abschnitt betitelt „Event-Handler hinzufügen“Es gibt mehrere Möglichkeiten, auf Events zu reagieren:
1. addEventListener-Methode
Abschnitt betitelt „1. addEventListener-Methode“Die moderne und empfohlene Methode:
const button = document.querySelector("#meinButton");
button.addEventListener("click", function() { console.log("Button wurde geklickt!");});Sie können auch benannte Funktionen verwenden:
function buttonKlickHandler() { alert("Hallo Welt!");}
button.addEventListener("click", buttonKlickHandler);2. Event-Handler als Eigenschaft
Abschnitt betitelt „2. Event-Handler als Eigenschaft“Eine einfachere, aber weniger flexible Methode:
const button = document.querySelector("#meinButton");
button.onclick = function() { console.log("Button wurde geklickt!");};Das Event-Objekt
Abschnitt betitelt „Das Event-Objekt“Wenn ein Event ausgelöst wird, wird automatisch ein Event-Objekt erstellt, das Informationen über das Event enthält:
button.addEventListener("click", function(event) { console.log("Event-Typ:", event.type); console.log("Geklicktes Element:", event.target); console.log("Position X:", event.clientX, "Y:", event.clientY);});Häufige Event-Typen
Abschnitt betitelt „Häufige Event-Typen“Maus-Events
Abschnitt betitelt „Maus-Events“element.addEventListener("click", handleClick); // Klick mit der Mauselement.addEventListener("dblclick", handleDblClick); // Doppelklickelement.addEventListener("mouseover", handleMouseOver); // Maus über Elementelement.addEventListener("mouseout", handleMouseOut); // Maus verlässt ElementKeyboard-Events
Abschnitt betitelt „Keyboard-Events“document.addEventListener("keydown", function(event) { console.log("Gedrückte Taste:", event.key);
if (event.key === "Enter") { console.log("Enter-Taste wurde gedrückt!"); }});Formular-Events
Abschnitt betitelt „Formular-Events“form.addEventListener("submit", handleSubmit); // Formular wird abgeschicktinput.addEventListener("change", handleChange); // Wert wurde geändertinput.addEventListener("input", handleInput); // Wert wird geändert (sofort)input.addEventListener("focus", handleFocus); // Element erhält Fokusinput.addEventListener("blur", handleBlur); // Element verliert FokusFenster- und Dokument-Events
Abschnitt betitelt „Fenster- und Dokument-Events“window.addEventListener("load", handleLoad); // Seite vollständig geladendocument.addEventListener("DOMContentLoaded", handleDOMReady); // DOM ist bereitwindow.addEventListener("resize", handleResize); // Fenstergrösse wurde geändertEvent-Delegation
Abschnitt betitelt „Event-Delegation“Diese Technik ermöglicht es, einen Event-Listener für ein übergeordnetes Element zu registrieren, anstatt für jedes untergeordnete Element:
// Ein Listener für alle Listenelementedocument.querySelector("#listenContainer").addEventListener("click", function(event) { if (event.target.tagName === "LI") { console.log("Liste wurde angeklickt:", event.target.textContent); }});Vorteile:
- Bessere Performance (weniger Event-Listener)
- Funktioniert auch für dynamisch hinzugefügte Elemente
- Weniger Code
Standardverhalten verhindern
Abschnitt betitelt „Standardverhalten verhindern“Bei manchen Events möchten Sie das Standardverhalten des Browsers verhindern:
document.querySelector("form").addEventListener("submit", function(event) { // Verhindert das Neuladen der Seite beim Formular-Submit event.preventDefault();
// Eigene Verarbeitung hier... console.log("Formular abgeschickt!");});Event-Listener entfernen
Abschnitt betitelt „Event-Listener entfernen“Um Speicherlecks zu vermeiden, sollten Sie nicht mehr benötigte Event-Listener entfernen:
function clickHandler() { console.log("Klick!"); button.removeEventListener("click", clickHandler);}
button.addEventListener("click", clickHandler);Übung: Interaktive Elemente erstellen
Abschnitt betitelt „Übung: Interaktive Elemente erstellen“Zusammenfassung
Abschnitt betitelt „Zusammenfassung“- Events sind der Schlüssel zu interaktiven Webseiten
- Mit
addEventListenerkönnen wir auf Benutzerinteraktionen reagieren - Häufige Event-Typen sind click, mouseover, keydown, submit und change
- Das Event-Objekt enthält nützliche Informationen über das ausgelöste Event
- Mit
preventDefault()können wir Standardverhalten des Browsers verhindern - Event-Delegation erlaubt effiziente Event-Behandlung für mehrere Elemente
Im nächsten Kapitel lernen wir, wie wir speziell mit Formularen und Benutzereingaben arbeiten können.