JavaScript: Events

Aus Flinkwiki
Wechseln zu: Navigation, Suche
Seitenübersicht
Zur Seite "JavaScript"
Zur Seite "JavaScript: DOM"
Zur Seite "JavaScript: Beispiele"
Zur Seite "Webprogrammierung"


Allgemeines

Die Schnittstelle Event repräsentiert ein Event, das im DOM stattfindet.


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



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:

  1. "Das div-Event wurde ausgelöst."
  2. "Das span-Event wurde ausgelöst."

Ein Klick auf "Hier klicken für Bubbling" produziert Ausgaben in folgender Reihenfolge:

  1. "Das span-Event wurde ausgelöst."
  2. "Das div-Event wurde ausgelöst."

Openclassrooms


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.


Quellen


| | |