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
Nächste Überarbeitung		 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/05 07:40] (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 round center box 60%>
 +{{ youtube>x70HZ70TFkQ? }}
 +//Video zum Thema Events und Eventlisteners//
 +</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 29:
  
 ==== 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 38:
 | ''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 54:
 }); });
 </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 67:
 | ''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 94:
 }); });
 </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>
  
 +<WRAP round center 60% info>
 +Eine vertiefte Beschreibung von Events mit interaktiven Code-Beispielen finden Sie hier: [[https://javascript.info/events|Javascript.info – Events]]
 +</WRAP>
  
 ===== Das Event-Objekt ===== ===== Das Event-Objekt =====
  
 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 121:
 }); });
 </code> </code>
 +</WRAP>
  
 ===== State – Zustand im UI ===== ===== State – Zustand im UI =====
Zeile 122: Zeile 128:
  
 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 154:
 }); });
 </code> </code>
 +</WRAP>
  
-==== Alle anderen Panels schliessen ==== 
  
-Bei einem klassischen Accordion soll immer nur ein Panel offen sein: 
- 
-<code javascript> 
-const buttons = document.querySelectorAll('.accordion-btn'); 
- 
-buttons.forEach(btn => { 
-  btn.addEventListener('click', () => { 
-    const panel = btn.nextElementSibling; 
-    const istOffen = panel.classList.contains('open'); 
- 
-    // Alle Panels schliessen 
-    buttons.forEach(andererBtn => { 
-      andererBtn.nextElementSibling.classList.remove('open'); 
-      andererBtn.setAttribute('aria-expanded', 'false'); 
-    }); 
- 
-    // Dieses Panel öffnen (nur wenn es vorher zu war) 
-    if (!istOffen) { 
-      panel.classList.add('open'); 
-      btn.setAttribute('aria-expanded', 'true'); 
-    } 
-  }); 
-}); 
-</code> 
  
  • de/modul/m291/learningunits/lu04/theorie/b_events.1772397581.txt.gz
  • Zuletzt geändert: 2026/03/01 21:39
  • von gkoch