JavaScript: Events: Unterschied zwischen den Versionen
Flinh1 (Diskussion | Beiträge) (→Notizen) |
Flinh1 (Diskussion | Beiträge) (→error) |
||
(27 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 8: | Zeile 8: | ||
== Allgemeines == | == Allgemeines == | ||
+ | Die Schnittstelle <code>Event</code> repräsentiert ein Event, das im DOM stattfindet. | ||
+ | * https://developer.mozilla.org/en-US/docs/Web/API/Event | ||
+ | * https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event | ||
---- | ---- | ||
− | + | Ein '''Ereignis''' tritt ein, wenn | |
+ | * der Benutzer über Maus oder Touchpad durch Aktionen wie ''click'' oder ''scroll'' mit der Seite interagiert. | ||
+ | * der Benutzer bestimmte Tasten auf der Tastatur drückt. | ||
+ | * im Programm ein Timer (Countdown) abläuft. | ||
+ | * aus dem Netz Daten eintreffen, die das Programm von einem Server angefordert hat. | ||
+ | ---- | ||
+ | |||
+ | == Liste gängiger HTML-Events == | ||
+ | |||
+ | {| class="wikitable" | ||
+ | !style="width:120em" | Event ||style="width:120em" | Eventhandler ||style="width:600em"| Beschreibung | ||
+ | |- | ||
+ | |style="width:120em" | blur ||style="width:120em" | onblur ||style="width:600em"|Ein HTML-Element hat den Fokus verloren. | ||
+ | |- | ||
+ | | change || onchange ||Der Inhalt eines Feldes hat sich geändert. | ||
+ | |- | ||
+ | | click || onclick ||Es wurde auf ein HTML-Element geklickt. | ||
+ | |- | ||
+ | | focus || onfocus ||Ein HTML-Element hat den Fokus erhalten (wurde aktiv). | ||
+ | |- | ||
+ | | keydown || onkeydown ||Auf der Tastatur wurde eine Taste gedrückt. | ||
+ | |- | ||
+ | | load || onload ||Das Laden der Seite oder eines Bildes wurde abgeschlossen. | ||
+ | |- | ||
+ | | mousedown ||onmousedown ||Eine Maustaste wurde gedrückt. | ||
+ | |- | ||
+ | | mouseover ||onmouseover ||Die Maus hat sich über ein HTML-Element bewegt. | ||
+ | |- | ||
+ | |} | ||
+ | * <nowiki>https://www.tutorialspoint.com/html/html_events_ref.htm</nowiki> | ||
+ | |||
+ | ---- | ||
+ | |||
+ | == Methoden der Event-Schnittstelle == | ||
+ | |||
+ | === preventDefault(); === | ||
+ | |||
+ | Syntax: ''event.preventDefault();'' | ||
+ | |||
+ | Diese Methode teilt dem 'user agent' mit, dass die Default-Aktion des Events (z. B. ''submit'') nicht ausgeführt werden soll. (... method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.) | ||
+ | |||
+ | * https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === stopPropagation(); === | ||
+ | |||
+ | Syntax: ''event.stopPropagation();'' | ||
+ | |||
+ | ''stopPropagation()'' unterbindet die Weiterverbreitung des aktuellen Events über das [https://molily.de/js/event-handling-effizient.html#capturing Capturing] und das [https://molily.de/js/event-handling-objekt.html#bubbling Bubbling]. | ||
+ | (The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.) | ||
+ | Syntax | ||
+ | * https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation | ||
* https://javascript.info/bubbling-and-capturing | * https://javascript.info/bubbling-and-capturing | ||
---- | ---- | ||
− | == | + | * https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5578156-ecoutez-des-evenements |
+ | ---- | ||
+ | |||
+ | == Capture und Bubbling == | ||
+ | |||
+ | Capture und Bubbling stellen zwei verschiedene Etappen der Eventausführung dar. ''Capture'' wird vor der Auslösung des Events ausgeführt, während das Bubbling ausgeführt wird, nachdem das Event ausgelöst wurde. Entscheidend ist hier der dritte Parameter von ''addEventListener()'' ''true'' oder ''false'': | ||
+ | <nowiki> | ||
+ | <div id="capt1"> | ||
+ | <span id="capt2">Hier klicken für Capture</span> | ||
+ | </div> | ||
+ | <div id="bubb1"> | ||
+ | <span id="bubb2">Hier klicken für Bubbling</span> | ||
+ | </div> | ||
+ | <script> | ||
+ | |||
+ | var capt1 = document.getElementById("capt1"), | ||
+ | capt2 = document.getElementById("capt2"), | ||
+ | bubb1 = document.getElementById("bubb1"), | ||
+ | bubb2 = document.getElementById("bubb2"); | ||
+ | |||
+ | capt1.addEventListener('click', function() { | ||
+ | alert("Das div-Event wurde ausgelöst."); | ||
+ | },true); | ||
+ | |||
+ | capt2.addEventListener('click', function() { | ||
+ | alert("Das span-Event wurde ausgelöst."); | ||
+ | },true); | ||
+ | |||
+ | bubb1.addEventListener('click', function() { | ||
+ | alert("Das div-Event wurde ausgelöst."); | ||
+ | },false); | ||
+ | |||
+ | bubb2.addEventListener('click', function() { | ||
+ | alert("Das span-Event wurde ausgelöst."); | ||
+ | },false); | ||
+ | |||
+ | </script> | ||
+ | </nowiki> | ||
+ | Ein Klick auf "Hier klicken für Capture" produziert Ausgaben in folgender Reihenfolge: | ||
+ | # "Das div-Event wurde ausgelöst." | ||
+ | # "Das span-Event wurde ausgelöst." | ||
+ | Ein Klick auf "Hier klicken für Bubbling" produziert Ausgaben in folgender Reihenfolge: | ||
+ | # "Das span-Event wurde ausgelöst." | ||
+ | # "Das div-Event wurde ausgelöst." | ||
+ | [http://course.oc-static.com/ftp-tutos/cours/javascript/part2/chap3/ex11.html Openclassrooms] | ||
+ | |||
+ | ---- | ||
+ | |||
+ | == error == | ||
Das Event "error" auf ''window' wird ausgelöst, wenn ein Fehler auftritt. | Das Event "error" auf ''window' wird ausgelöst, wenn ein Fehler auftritt. | ||
Zeile 30: | Zeile 133: | ||
* https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/error | * https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/error | ||
+ | |||
+ | ---- | ||
+ | == Mausbewegung == | ||
+ | |||
+ | Das Event ''mousemove''[https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event] liefert ein Objekt vom Typ ''MouseEvent''. Sobald sich die Maus bewegt, wird unsere Callback-Funktion mit einem Parameter vom Typ ''MouseEvent'' aufgerufen, welche die Daten der Mausbewegung enthält.[https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5578181-recuperez-des-donnees-utilisateur-avec-les-evenements] | ||
+ | |||
+ | Dieses Objekt erlaubt uns unter anderem Zugriff auf: | ||
+ | * clientX / clientY : Position der Maus innerhalb der lokalen Koordinaten (Inhalt des DOM) | ||
+ | * offsetX / offsetY : Position der Maus bezogen auf das Element, für welches auf das Event gehorcht wird | ||
+ | * pageX / pageY : Position der Maus bezogen auf das ganze ''document'' | ||
+ | * screenX / screenY : Position der Maus bezogen auf das Fenster des Browsers | ||
+ | * movementX / movementY : Position der Maus bezogen auf die Position der Maus beim letzten ''mousemove''-Event | ||
+ | [https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event openclassrooms.com] | ||
---- | ---- | ||
Zeile 35: | Zeile 151: | ||
== Quellen == | == Quellen == | ||
+ | * https://developer.mozilla.org/en-US/docs/Web/Events | ||
* https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/%C3%9Cbersicht | * https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/%C3%9Cbersicht | ||
− | * | + | * https://www.w3schools.com/jsref/dom_obj_event.asp |
---- | ---- | ||
− | |||
[[Kategorie: Alle Seiten]] | [[Kategorie: Internet]] | [[Kategorie: Web]] | [[Kategorie: Programmierung ]] | [[Kategorie: Alle Seiten]] | [[Kategorie: Internet]] | [[Kategorie: Web]] | [[Kategorie: Programmierung ]] |
Aktuelle Version vom 14. Oktober 2019, 09:39 Uhr
Inhaltsverzeichnis
Allgemeines
Die Schnittstelle Event
repräsentiert ein Event, das im DOM stattfindet.
- https://developer.mozilla.org/en-US/docs/Web/API/Event
- https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event
Ein Ereignis tritt ein, wenn
- der Benutzer über Maus oder Touchpad durch Aktionen wie click oder scroll mit der Seite interagiert.
- der Benutzer bestimmte Tasten auf der Tastatur drückt.
- im Programm ein Timer (Countdown) abläuft.
- aus dem Netz Daten eintreffen, die das Programm von einem Server angefordert hat.
Liste gängiger HTML-Events
Event | Eventhandler | Beschreibung |
---|---|---|
blur | onblur | Ein HTML-Element hat den Fokus verloren. |
change | onchange | Der Inhalt eines Feldes hat sich geändert. |
click | onclick | Es wurde auf ein HTML-Element geklickt. |
focus | onfocus | Ein HTML-Element hat den Fokus erhalten (wurde aktiv). |
keydown | onkeydown | Auf der Tastatur wurde eine Taste gedrückt. |
load | onload | Das Laden der Seite oder eines Bildes wurde abgeschlossen. |
mousedown | onmousedown | Eine Maustaste wurde gedrückt. |
mouseover | onmouseover | Die Maus hat sich über ein HTML-Element bewegt. |
- https://www.tutorialspoint.com/html/html_events_ref.htm
Methoden der Event-Schnittstelle
preventDefault();
Syntax: event.preventDefault();
Diese Methode teilt dem 'user agent' mit, dass die Default-Aktion des Events (z. B. submit) nicht ausgeführt werden soll. (... method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.)
stopPropagation();
Syntax: event.stopPropagation();
stopPropagation() unterbindet die Weiterverbreitung des aktuellen Events über das Capturing und das Bubbling. (The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.) Syntax
- https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
- https://javascript.info/bubbling-and-capturing
Capture und Bubbling
Capture und Bubbling stellen zwei verschiedene Etappen der Eventausführung dar. Capture wird vor der Auslösung des Events ausgeführt, während das Bubbling ausgeführt wird, nachdem das Event ausgelöst wurde. Entscheidend ist hier der dritte Parameter von addEventListener() true oder false:
<div id="capt1"> <span id="capt2">Hier klicken für Capture</span> </div> <div id="bubb1"> <span id="bubb2">Hier klicken für Bubbling</span> </div> <script> var capt1 = document.getElementById("capt1"), capt2 = document.getElementById("capt2"), bubb1 = document.getElementById("bubb1"), bubb2 = document.getElementById("bubb2"); capt1.addEventListener('click', function() { alert("Das div-Event wurde ausgelöst."); },true); capt2.addEventListener('click', function() { alert("Das span-Event wurde ausgelöst."); },true); bubb1.addEventListener('click', function() { alert("Das div-Event wurde ausgelöst."); },false); bubb2.addEventListener('click', function() { alert("Das span-Event wurde ausgelöst."); },false); </script>
Ein Klick auf "Hier klicken für Capture" produziert Ausgaben in folgender Reihenfolge:
- "Das div-Event wurde ausgelöst."
- "Das span-Event wurde ausgelöst."
Ein Klick auf "Hier klicken für Bubbling" produziert Ausgaben in folgender Reihenfolge:
- "Das span-Event wurde ausgelöst."
- "Das div-Event wurde ausgelöst."
error
Das Event "error" auf window' wird ausgelöst, wenn ein Fehler auftritt.
Der Eventhandler bekommt automatisch als Argument übergeben:
Fehlermeldung, Dateiname, Zeile
window.onerror = function( meldung, datei, zeile ){ alert("Fehler: " + meldung + "\nDatei: " + datei + "Zeile: ");
Bei return true wird die Fehlermeldung nicht in der Konsole angezeigt.
Mausbewegung
Das Event mousemove[1] liefert ein Objekt vom Typ MouseEvent. Sobald sich die Maus bewegt, wird unsere Callback-Funktion mit einem Parameter vom Typ MouseEvent aufgerufen, welche die Daten der Mausbewegung enthält.[2]
Dieses Objekt erlaubt uns unter anderem Zugriff auf:
- clientX / clientY : Position der Maus innerhalb der lokalen Koordinaten (Inhalt des DOM)
- offsetX / offsetY : Position der Maus bezogen auf das Element, für welches auf das Event gehorcht wird
- pageX / pageY : Position der Maus bezogen auf das ganze document
- screenX / screenY : Position der Maus bezogen auf das Fenster des Browsers
- movementX / movementY : Position der Maus bezogen auf die Position der Maus beim letzten mousemove-Event
Quellen
- https://developer.mozilla.org/en-US/docs/Web/Events
- https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/%C3%9Cbersicht
- https://www.w3schools.com/jsref/dom_obj_event.asp
| | |