de:modul:m291:learningunits:lu04:theorie:b_events

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu04:theorie:b_events [2026/03/01 21:39] – gkochde:modul:m291:learningunits:lu04:theorie:b_events [2026/03/01 21:44] (aktuell) – gkoch
Zeile 6: Zeile 6:
 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. 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 box round center 80%>
 <code javascript> <code javascript>
 const btn = document.querySelector('#mein-button'); const btn = document.querySelector('#mein-button');
Zeile 13: Zeile 14:
 }); });
 </code> </code>
 +</WRAP>
  
-<WRAP tip>+<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. **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> </WRAP>
Zeile 22: Zeile 24:
  
 ==== Allgemeine Interaktion ==== ==== Allgemeine Interaktion ====
 +<WRAP box round center 80%>
 ^ Event ^ Wann? ^ Einsatz ^ ^ Event ^ Wann? ^ Einsatz ^
 | ''click'' | Maustaste oder Tap (mit ~300ms Verzögerung) | Buttons, Links, Toggle | | ''click'' | Maustaste oder Tap (mit ~300ms Verzögerung) | Buttons, Links, Toggle |
Zeile 31: Zeile 33:
 | ''scroll'' | Seite wird gescrollt | Sticky Nav, Lazy Loading | | ''scroll'' | Seite wird gescrollt | Sticky Nav, Lazy Loading |
 | ''DOMContentLoaded'' | HTML vollständig geparst | JS-Initialisierung | | ''DOMContentLoaded'' | HTML vollständig geparst | JS-Initialisierung |
 +</WRAP> 
 +<WRAP box round center 80%>
 <code javascript> <code javascript>
 // Tastatur: Escape schliesst ein Element // Tastatur: Escape schliesst ein Element
Zeile 46: Zeile 49:
 }); });
 </code> </code>
 +</WRAP>
  
 ===== Pointer Events (moderner Standard) ===== ===== Pointer Events (moderner Standard) =====
  
 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. 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.
 +<WRAP box round center 80%>
 ^ Event ^ Wann? ^ ^ Event ^ Wann? ^
 | ''pointerdown'' | Zeiger gedrückt / Finger berührt Bildschirm | | ''pointerdown'' | Zeiger gedrückt / Finger berührt Bildschirm |
Zeile 58: Zeile 62:
 | ''pointerleave'' | Zeiger verlässt Element | | ''pointerleave'' | Zeiger verlässt Element |
 | ''pointercancel'' | Interaktion abgebrochen (z.B. Anruf, Scroll) | | ''pointercancel'' | Interaktion abgebrochen (z.B. Anruf, Scroll) |
 +</WRAP>
  
-==== Wichtige Eigenschaften des Event-Objekts ==== 
- 
-^ Eigenschaft ^ Beschreibung ^ 
-| ''event.pointerType'' | Eingabegerät: ''mouse'', ''touch'' oder ''pen'' | 
-| ''event.clientX / .clientY'' | Position im Viewport | 
-| ''event.isPrimary'' | ''true'' beim ersten Finger (bei Multi-Touch) | 
-| ''event.pressure'' | Druckstärke 0–1 (bei Stift-Eingabe) | 
-| ''event.pointerId'' | Eindeutige ID des Zeigers | 
  
 ==== Beispiel: Hover und Klick mit Pointer Events ==== ==== Beispiel: Hover und Klick mit Pointer Events ====
 +<WRAP box round center 60%>
 <code javascript> <code javascript>
 const box = document.querySelector('.box'); const box = document.querySelector('.box');
Zeile 92: Zeile 89:
 }); });
 </code> </code>
 +</WRAP>
  
-<WRAP important>+<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. **Ä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> </WRAP>
Zeile 101: Zeile 99:
  
 Alle Handler erhalten automatisch ein **Event-Objekt** als Parameter: Alle Handler erhalten automatisch ein **Event-Objekt** als Parameter:
 +<WRAP box round center 80%>
 ^ Eigenschaft / Methode ^ Beschreibung ^ ^ Eigenschaft / Methode ^ Beschreibung ^
 | ''event.target'' | Das Element, das das Event ausgelöst hat | | ''event.target'' | Das Element, das das Event ausgelöst hat |
Zeile 115: Zeile 113:
 }); });
 </code> </code>
 +</WRAP>
  
 ===== State – Zustand im UI ===== ===== State – Zustand im UI =====
Zeile 122: Zeile 120:
  
 Das Muster kennen Sie bereits vom Toggle: Das Muster kennen Sie bereits vom Toggle:
 +<WRAP box round center 60%>
 ^ Zustand ^ Klasse gesetzt? ^ ''aria-expanded'' ^ ^ Zustand ^ Klasse gesetzt? ^ ''aria-expanded'' ^
 | geschlossen | ''.panel'' (kein ''.open'') | ''"false"'' | | geschlossen | ''.panel'' (kein ''.open'') | ''"false"'' |
 | offen | ''.panel.open'' | ''"true"'' | | offen | ''.panel.open'' | ''"true"'' |
 +</WRAP>
  
 ==== State aus dem DOM lesen ==== ==== State aus dem DOM lesen ====
  
 Sie können den Zustand direkt aus dem DOM ablesen, ohne eine eigene Variable zu führen: Sie können den Zustand direkt aus dem DOM ablesen, ohne eine eigene Variable zu führen:
 +<WRAP box round center 80%>
 <code javascript> <code javascript>
 const panel = document.querySelector('.panel'); const panel = document.querySelector('.panel');
Zeile 147: Zeile 146:
 }); });
 </code> </code>
 +</WRAP>
  
 ==== Alle anderen Panels schliessen ==== ==== Alle anderen Panels schliessen ====
  
 Bei einem klassischen Accordion soll immer nur ein Panel offen sein: Bei einem klassischen Accordion soll immer nur ein Panel offen sein:
 +<WRAP box round center 80%>
 <code javascript> <code javascript>
 const buttons = document.querySelectorAll('.accordion-btn'); const buttons = document.querySelectorAll('.accordion-btn');
Zeile 174: Zeile 174:
 }); });
 </code> </code>
 +</WRAP>
  
  • de/modul/m291/learningunits/lu04/theorie/b_events.txt
  • Zuletzt geändert: 2026/03/01 21:44
  • von gkoch