[S4L2] DOM Events Flashcards
Gibt es verschiedene Typen von Nodes im DOM?
Ja, alles ist ein Node im DOM
- Fast alle sind Elements
- Die letzten sind Text
Ist jede Interaktion eines Nutzers mit einer Website ein Event?
- Ja
- Klicken, Scrollen, Tastendruck können alle vom Browser erkannt werden
Was ist ein Event Listener?
-Wenn man einem Element auf ein Event lauschen lässt und dann aus dem Trigger ein Callback laufen lässt
Wie kann man einem Element ein eventListener hinzufügen?
element.addEventListener(‘click’, callback);
Welche Arten von Events gibt es?
- Dutzende
- Die meisten sind MouseEvents, welche man bei einem “Click” triggered
Wie viele Events kann man einem Element als Listener hinzufügen?
-Für jede Art von Event eines (Keypress, Hover, MouseClick etc)
Muss man beim Hinzufügen von Events zu einem DOM Elementes jedes Mal ein evenListener mit Callback nutzen?
Ja
Was macht das .target Object bei einem evenListener?
- Gibt alle Infos über den DOM Node der getriggered wurde
- Besitzt Eigenschaften .children, .parent, .style, .innertext etc
- Kann genutzt werden um das Element selbst oder seine Bekannten zu manipulieren
Wie fügt man einem DOM Element einen evenListener hinzu?
element. addEventListener(‘click’, (event) => { event. target.style.backgroundColor = ‘blue’; });
Wo kann man Infos über die Eigenschaften von Events erhalten?
https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties
Kann man mit einem Event auch herausfinden welcher Knopf gedrückt wurde?
Ja, über die Event Object Eigenschaften
Wie funktioniert event propagation?
- Wie eine Pyramide
- Die unterste Ebene ist die größte und wird nach oben hin immer kleiner
- Wenn man ganz oben ist steht man auf allen Layers
- Wenn man ein Event Triggered wird es über den Baum des DOMs auf alle Parent Nodes weitergegeben
Was ist das Problem mit event propagation?
- Wenn man ein Event auf einen Child triggered, überträgt es sich auf den Parent und kann dort ebenfalls einen Listener triggern
- Das kann unerwünschte Effekte auslösen
Wie kann man event propagation verhindern?
Mit .stopPropagation() in einem eventListener in einem ChildNode
const eventHandler = (event) => { event. stopPropagation() };
Was macht . preventDefault und wann sollte man es einsetzen?
- Manche HTML Elemente wie Forms haben ein Default verhalten
- Bei einem Seiten Refresh leeren sie sich automatisch. Dies kann man mit prevenDefault unterbinden
