JavaScript: Events - Versionsgeschichte

Flinh1: /* error */

2019-10-14T08:39:31Z

‎error

2019-10-14T06:52:10Z

‎Allgemeines

2019-10-12T07:10:01Z

‎Capture und Bubbling

2019-10-12T07:09:44Z

‎Capture und Bubbling

2019-10-12T07:07:02Z

‎Capture und Bubbling

2019-10-12T07:04:18Z

‎Capture und Bubbling

2019-10-12T07:03:16Z

2019-10-12T07:02:47Z

‎Liste gängiger HTML-Events

2019-10-12T06:55:16Z

‎Capture und Bubbling

2019-10-12T06:54:50Z

‎Capture und Bubbling

← Nächstältere Version		Version vom 14. Oktober 2019, 08:39 Uhr
Zeile 133:		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 7: / Zeile 7: @@
 == Allgemeines ==
 Ein '''Ereignis''' tritt ein, wenn
@@ Zeile 15: / Zeile 21: @@
 ----
 == Liste gängiger HTML-Events ==

@@ Zeile 101: / Zeile 101: @@
 		alert("Das span-Event wurde ausgelöst.");
 	},false);
 </script>
 </nowiki>

@@ Zeile 101: / Zeile 101: @@
 		alert("Das span-Event wurde ausgelöst.");
 	},false);
+</script>
 </nowiki>
 Ein Klick auf "Hier klicken für Capture" produziert Ausgaben in folgender Reihenfolge:

@@ Zeile 89: / Zeile 89: @@
 		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);
 </nowiki>

@@ Zeile 82: / Zeile 82: @@
 	var capt1 = document.getElementById("capt1"),
-		capt2 = document.getElementById("capt2"),
+            capt2 = document.getElementById("capt2"),
-		bubb1 = document.getElementById("bubb1"),
+	    bubb1 = document.getElementById("bubb1"),
-		bubb2 = document.getElementById("bubb2");
+	    bubb2 = document.getElementById("bubb2");
 	capt1.addEventListener('click', function() {

@@ Zeile 68: / Zeile 68: @@
 * https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5578156-ecoutez-des-evenements
 ----
 == Capture und Bubbling ==

@@ Zeile 18: / Zeile 18: @@
 {| class="wikitable"
-!style="width:200em" | Event ||style="width:600em"| Beschreibung
+!style="width:120em" | Event ||style="width:120em" | Eventhandler ||style="width:600em"| Beschreibung
 |-
-|style="width:200em" | onblur ||style="width:600em"|Ein HTML-Element hat den Fokus verloren.
+|style="width:120em" | blur ||style="width:120em" | onblur ||style="width:600em"|Ein HTML-Element hat den Fokus verloren.
 |-
-| onchange ||Der Inhalt eines Feldes hat sich geändert.
+| change || onchange ||Der Inhalt eines Feldes hat sich geändert.
 |-
-| onclick ||Es wurde auf ein HTML-Element geklickt.
+| click || onclick ||Es wurde auf ein HTML-Element geklickt.
 |-
-| onfocus ||Ein  HTML-Element hat den Fokus erhalten (wurde aktiv).
+| focus || onfocus ||Ein  HTML-Element hat den Fokus erhalten (wurde aktiv).
 |-
-| onkeydown ||Auf der Tastatur wurde eine Taste gedrückt.
+| keydown || onkeydown ||Auf der Tastatur wurde eine Taste gedrückt.
 |-
-| onload ||Das Laden der Seite oder eines Bildes wurde abgeschlossen.
+| load || onload ||Das Laden der Seite oder eines Bildes wurde abgeschlossen.
 |-
-| onmousedown ||Eine Maustaste wurde gedrückt.
+| mousedown ||onmousedown ||Eine Maustaste wurde gedrückt.
 |-
-| onmouseover ||Die Maus hat sich über ein HTML-Element bewegt.
+| mouseover ||onmouseover ||Die Maus hat sich über ein HTML-Element bewegt.
 |-
 |}

@@ Zeile 109: / Zeile 109: @@
 # "Das div-Event wurde ausgelöst."
 [http://course.oc-static.com/ftp-tutos/cours/javascript/part2/chap3/ex11.html Openclassrooms]
 == error ==

@@ Zeile 72: / Zeile 72: @@
 == Capture und Bubbling ==
-Capture und Bubbling stellen zwei verschiedene Etappen der Eventausführung dar. ''Captur'' 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'':
+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">
@@ Zeile 108: / Zeile 108: @@
 # "Das span-Event wurde ausgelöst."
 # "Das div-Event wurde ausgelöst."
 == error ==