Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu04:theorie:b_events [2026/03/01 21:20] – angelegt gkoch
+++ de:modul:m291:learningunits:lu04:theorie:b_events [2026/03/01 21:44] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU04b – Events & State ======
 ===== Events & EventListener =====
-Ein **Event** ist ein Signal, das der Browser aussendet, wenn etwas passiert – ein Klick, eine Tastatureingabe, ein Scroll. Mit einem **EventListener** registrieren Sie eine Funktion, die auf dieses Signal reagiert.
+Ein **Event** ist ein Signal, das der Browser aussendet, wenn etwas passiert – ein Klick, eine Tastatureingabe, eine Berührung. Mit einem **EventListener** registrieren Sie eine Funktion, die auf dieses Signal reagiert.
-<WRAP tip>
+<WRAP box round center 80%>
+<code javascript>
+const btn = document.querySelector('#mein-button');
+btn.addEventListener('click', () => {
+  console.log('Geklickt!');
+});
+</code>
+</WRAP>
+<WRAP round center tip 80%>
 **Verbindung zum Alarado-Projekt:** Beim Dark/Light Toggle haben Sie bereits ''addEventListener'' verwendet: ''checkbox.addEventListener('change', toggleTheme)''. Heute nutzen wir dasselbe Muster für das Accordion.
 </WRAP>
-==== addEventListener – Grundprinzip ====
-<code javascript>
+===== Die wichtigsten Event-Typen =====
-const btn = document.querySelector('#mein-button');
-// Syntax: element.addEventListener(eventTyp, funktion)
+==== Allgemeine Interaktion ====
-btn.addEventListener('click', function() {
+<WRAP box round center 80%>
-  console.log('Button wurde geklickt!');
+^ Event ^ Wann? ^ Einsatz ^
+| ''click'' | Maustaste oder Tap (mit ~300ms Verzögerung) | Buttons, Links, Toggle |
+| ''change'' | Wert geändert + Fokus verloren | Checkbox, Select |
+| ''input'' | Wert ändert sich sofort (jedes Zeichen) | Live-Suche, Zeichenzähler |
+| ''submit'' | Formular wird abgesendet | Formular-Validierung |
+| ''keydown'' | Taste gedrückt | Shortcuts, Keyboard-Navigation |
+| ''scroll'' | Seite wird gescrollt | Sticky Nav, Lazy Loading |
+| ''DOMContentLoaded'' | HTML vollständig geparst | JS-Initialisierung |
+</WRAP>
+<WRAP box round center 80%>
+<code javascript>
+// Tastatur: Escape schliesst ein Element
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    panel.classList.remove('open');
+  }
 });
-// Kürzer mit Arrow Function:
+// JS erst ausführen, wenn das DOM bereit ist
-btn.addEventListener('click', () => {
+document.addEventListener('DOMContentLoaded', () => {
-  console.log('Geklickt!');
+  const buttons = document.querySelectorAll('.accordion-btn');
+  // ...
 });
 </code>
+</WRAP>
-==== Wichtige Event-Typen ====
+===== Pointer Events (moderner Standard) =====
-^ Event ^ Wann wird es ausgelöst? ^ Typischer Einsatz ^
+Pointer Events sind der **aktuelle Standard** für alle Zeigereingaben. Sie decken Maus, Touchscreen und Stift mit einem einzigen Event-System ab – und ersetzen damit die älteren separaten Maus- und Touch-Events.
-| ''click'' | Maustaste gedrückt + losgelassen | Buttons, Toggle, Accordion |
+<WRAP box round center 80%>
-| ''keydown'' | Taste gedrückt (jede Taste) | Keyboard-Navigation |
+^ Event ^ Wann? ^
-| ''keyup'' | Taste losgelassen | Formular-Validierung |
+| ''pointerdown'' | Zeiger gedrückt / Finger berührt Bildschirm |
-| ''change'' | Wert eines Inputs geändert + Fokus verloren | Checkbox, Select |
+| ''pointermove'' | Zeiger bewegt sich |
-| ''focus'' | Element erhält Fokus | Formular, Accessibility |
+| ''pointerup'' | Zeiger losgelassen / Finger abgehoben |
-| ''blur'' | Element verliert Fokus | Validierung beim Verlassen |
+| ''pointerenter'' | Zeiger betritt Element |
-| ''mouseover'' | Maus betritt das Element | Hover-Effekte |
+| ''pointerleave'' | Zeiger verlässt Element |
+| ''pointercancel'' | Interaktion abgebrochen (z.B. Anruf, Scroll) |
-==== Das Event-Objekt ====
+</WRAP>
-Jeder Handler erhält automatisch ein **Event-Objekt** als Parameter – darin stecken nützliche Informationen:
+==== Beispiel: Hover und Klick mit Pointer Events ====
+<WRAP box round center 60%>
 <code javascript>
-btn.addEventListener('click', (event) => {
+const box = document.querySelector('.box');
-  // event.target → das Element, das geklickt wurde
-  console.log(event.target);
-  // event.key → bei Tastaturevents: 'Enter', 'Escape', ' ' etc.
+box.addEventListener('pointerenter', () => {
-  // event.preventDefault() → Standardverhalten verhindern (z.B. Formular-Submit)
+  box.classList.add('hovered');
 });
-// Keyboard: Enter und Space wie Click behandeln
+box.addEventListener('pointerleave', () => {
-btn.addEventListener('keydown', (event) => {
+  box.classList.remove('hovered');
-  if (event.key === 'Enter' || event.key === ' ') {
+});
-    // gleiche Aktion wie beim Click
+box.addEventListener('pointerdown', (event) => {
+  // Welches Gerät wird verwendet?
+  if (event.pointerType === 'touch') {
+    console.log('Touch-Eingabe');
+  } else if (event.pointerType === 'mouse') {
+    console.log('Maus-Eingabe');
+  } else if (event.pointerType === 'pen') {
+    console.log('Stift, Druck:', event.pressure);
   }
 });
 </code>
+</WRAP>
-> **Tipp:** Wenn Sie ''<button>'' verwenden (nicht ''<div>''), reagiert es von sich aus auf ''Enter'' und ''Space''. Sie brauchen dann keinen eigenen Keyboard-EventListener.
+<WRAP round center 80% important>
+**Ältere Alternativen:** ''mousedown'' / ''mousemove'' / ''mouseup'' funktionieren nur mit der Maus. ''touchstart'' / ''touchmove'' / ''touchend'' nur auf Touchscreens. Pointer Events ersetzen beide – verwenden Sie in neuen Projekten immer Pointer Events.
+</WRAP>
-----
+===== Das Event-Objekt =====
+Alle Handler erhalten automatisch ein **Event-Objekt** als Parameter:
+<WRAP box round center 80%>
+^ Eigenschaft / Methode ^ Beschreibung ^
+| ''event.target'' | Das Element, das das Event ausgelöst hat |
+| ''event.type'' | Name des Events (z.B. ''pointerdown'') |
+| ''event.preventDefault()'' | Standardverhalten verhindern (z.B. Link nicht öffnen) |
+| ''event.stopPropagation()'' | Event nicht weiter nach oben weitergeben |
+<code javascript>
+// Beispiel: Link-Klick abfangen
+document.querySelector('a').addEventListener('click', (event) => {
+  event.preventDefault();
+  console.log('Navigation verhindert');
+});
+</code>
+</WRAP>
 ===== State – Zustand im UI =====
@@ Zeile 66: / Zeile 120: @@
 Das Muster kennen Sie bereits vom Toggle:
+<WRAP box round center 60%>
 ^ Zustand ^ Klasse gesetzt? ^ ''aria-expanded'' ^
 | geschlossen | ''.panel'' (kein ''.open'') | ''"false"'' |
 | offen | ''.panel.open'' | ''"true"'' |
+</WRAP>
 ==== State aus dem DOM lesen ====
 Sie können den Zustand direkt aus dem DOM ablesen, ohne eine eigene Variable zu führen:
+<WRAP box round center 80%>
 <code javascript>
 const panel = document.querySelector('.panel');
@@ Zeile 80: / Zeile 135: @@
 btn.addEventListener('click', () => {
-  // Zustand aus dem DOM lesen
   const istOffen = panel.classList.contains('open');
@@ Zeile 90: / Zeile 144: @@
     btn.setAttribute('aria-expanded', 'true');
   }
-  // Oder kürzer in einem Schritt:
-  // panel.classList.toggle('open');
 });
 </code>
+</WRAP>
 ==== Alle anderen Panels schliessen ====
-Bei einem klassischen Accordion soll immer nur ein Panel offen sein. Beim Öffnen eines neuen Panels werden alle anderen geschlossen:
+Bei einem klassischen Accordion soll immer nur ein Panel offen sein:
+<WRAP box round center 80%>
 <code javascript>
 const buttons = document.querySelectorAll('.accordion-btn');
@@ Zeile 105: / Zeile 157: @@
 buttons.forEach(btn => {
   btn.addEventListener('click', () => {
-    const panel = btn.nextElementSibling; // das nächste Geschwister-Element
+    const panel = btn.nextElementSibling;
     const istOffen = panel.classList.contains('open');
@@ Zeile 122: / Zeile 174: @@
 });
 </code>
+</WRAP>