Javascript event handler

Programmierte Reaktion auf Ereignisse

Javascript \| Events	ECMAScript für HTML und XML - Ereignisse (events)
Strategie
Attribute
EventListener
x
	Seite in Arbeit !
Links	Ausgewählte Links zum Thema 'Javascript Event Handler'

Event Handler Strategie
Es gibt mehrere unterschiedliche Möglichkeiten, eigene Funktionen als event handler einzusetzen. Resourcen Während des Besuchs einer Webseite wird ständig eine große Anzahl von events ausgelöst. Wenn ein wesentlicher Anteil dieser events über eigene Funktionen läuft, dann wird jeder PC dadurch stark belastet. Deshalb ist es notwendig, die Anzahl der ausgewerteten events so klein wie möglich zu halten, und die Arbeitszeit der Funktionen zu minimieren.	Arbeitsbereich Nur in wenigen Fällen ist es notwendig, event handler für ein ganzes Dokument einzusetzen. Wesentlich besser ist es, nur events eines bestimmten Elements zu überwachen.
Selektive Auswertung In vielen Situationen treten mehr events auf, als tatsächlich ausgewertet werden. In diesem Fall sollte die handler Funktion so optimiert werden, dass die Entscheidung darüber mit möglichst wenig Aufwand erfolgt. Ignorierte events sollen so wenig Prozessor-Leistung wie möglich verbrauchen.	Handler Ein/Aus-Schalten Manchmal ist es möglich, event handler zeitweise abzuschalten und bei Bedarf wieder einzuschalten. Davon sollte man Gebrauch machen. Das gilt insbesondere dann, wenn mehrere events überwacht werden: Oft kann man die Überwachung zwischen mehreren events umschalten, und zu einem Zeitpunkt immer nur ein einziges event auszuwerten.

Event Handler Attribute
Event handler Wenn ein event mit einem eigenen Programm überwacht werden soll, dann ist es günstig, die korrekte Funktion mit einem möglichst einfachen event handler zu testen, ähnlich wie im Beispiel rechts.	Javascript-Beispiel für eine event handler Funktion: function eh1() { alert("Funktion eh1"); }
Eine Möglichkeit, events bestimmter Elemente zu überwachen, sind event handler Attribute. Jeder der Attribut-Namen beginnt mit "on", gefolgt vom Namen des events. Live-Test: Klicken sie auf das überwachte Element !	Attribut-Beispiel: <div id="div1" onclick="eh1()"> Überwachtes Element </div>
Event handler Attribute eignen sich für einfache Fälle, z.B. <button>-Elemente (rechts). Mit Standard DOM Methoden ist es möglich, Attribute zu lesen, zu ändern oder neu zu erstellen. Event-Attribute verhalten sich teilweise anders - ihr Werte ist z.B. eine Funktion, kein String. ♦ Details zur Programmierung von Event handler Attributen, mit Live-Test.	Button-Element mit onclick-Attribut: <button onclick="eh1()"> Klick ! </button>

EventListener
Die Standard-Methode zur Überwachung von Ereignissen ist addEventListener Damit wird die Überwachung eines bestimmten Ereignisses mit einem Element und mit einer handler-Funktion verknüpft. Diese Methode ist sehr flexibel: + Das Event wird nur genau für das bezeichnete Element überwacht. + Es ist möglich für ein Element mehrere Events zu überwachen.	+ Es ist möglich, das gleiche Event in mehreren Elementen zu überwachen. + Es ist möglich, den Event-handler ganz oder zeitweise abzuschalten und später wieder zu aktivieren. + Die bezeichnete Funktion erhält die event-Daten als Attribut. Allerdings kann die Methode erst nach dem Laden einer Webseite angewendet werden - vorher existieren die adressierten Elemente noch nicht ! Häufig sind Befehle mit diese Methode daher in einem onload-handler enthalten - Dieser handler wird nach dem vollständigen laden der Webseite ausgeführt.
Das Beispiel rechts zeigt, wie die beiden event-handler bereits im HTML-Quelltext als Attribute definiert werden. ♦ Details zu Maus-Ereignissen.	Grafik (z.B. Landkarte). Die Maus-Bewegung über der Karte und ein Klick auf die Karte werden überwacht: <img src="karte.gif" onmousemove="ehm1()" onmouseup="ehm2()" style="cursor:pointer;" />
Rechts wird gezeigt, wie man mit Javascript event-Listener definiert. ► Der vorgestellte Javascript Code wird von einem onload-Handler (hier my_onload) verwendet, weil das adressierte Element (hier n) vorher noch nicht existiert. ► Die Wirkung ist die gleiche wie mit Attributen (oben) - allerdings sind event listener flexibler und können nach dem Laden der Seite beliebig oft modifizierrt werden.	Die gleiche Grafik ohne Event handler attribute <body onload="my_onload()"> ... <img id="karte" src="karte.gif" style="cursor:pointer;" /> Javascript Definition der event handler: function my_onload() { n = document.getElementById("karte"); n.addEventListener("mousemove",ehm1,true); n.addEventListener("mouseup",ehm2,true); // ... }
M$IE verwendet - wie auch sonst häufig - eine eigene Variante. Die Wirkung ist ähnlich, unterscheidet sich lediglich in den Details der event-Verarbeitung.	M$IE-Variante (non-Standard) zur Definition der event handler: n.attachEvent("onmousemove",ehm1); n.attachEvent("onmouseup",ehm2);
So wird ein handler wieder entfernt:	Standard-Variante n.removeEventListener("mousemove",ehm1,true); M$IE-Variante n.detachEvent("onmousemove",ehm1);
event als Argument Die im EventListener bezeichnete Funktion erhält das event und damit alle seine Daten als Argument.	Das ist wichtig, z.B. für die Auswertung der Maus-Koordinaten in der eigenen event handler Funktion. ♦ Live Demo-Beispiel: Location Library ♦ Details zu Maus-Ereignissen.

Kapitel
var msie = document.all?true:false; if (!msie) {document.captureEvents(Event.MOUSEMOVE);} document.onmousemove = ehm3;	// NS4 element.captureEvents() ;

Ausgewählte Links zum Thema 'event handler'
Quirksmode: Advanced event registration models (en)

Zum Inhaltsverzeichnis

> Entwicklung > Javascript > Events