Stil mit {stil}

Feb 2008

Javascript Events:: Eigenschaften und Methoden von Ereignissen

Ereignisse beherbergt wichtige Informationen, die das Ereignis und seinen aktuellen Zustand beschreiben – z.B.

• das HTML-Element, auf dem das Ereignis stattfand,
• die auslösende Maustaste oder
• welche Taste auf der Tastatur das Ereignis auslöste.

Im DOM Level 2 wird das Ereignis-Objekt automatisch an die aufgerufende Funktion weitergegeben, aber der Programmierer muss das Event der Funktion trotzdem ausdrücklich übergeben. Um Konflikte mit dem window.event von IE zu vermeiden, sollte man als Namen für den Parameter nicht "event" wählen.

element.onclick = someFunction;  oder 

function someFunction(evt) {
    // Verarbeitung des Ereignisses
}

Dieser Parameter ist die einzige Verbindung zum event-Objekt. Wenn wir das Ereignis später in einer anderen Funktion brauchen, muss die Funktion als Relay dienen und das Ereignis oder die Werte seiner Eigenschaften weitergeben.

Anpassung der Referenzen auf das Event-Objekt

Um den unterschiedlichen Umgang mit dem Event-Objekt zwischen den Browsern anzupassen, benutzen wir eine Objekt-Erkennung (Object Detection):

function myFunc(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    // Verarbeitung des Ereignisses
}

Klicken Sie in das Feld oder aktivieren Sie das Feld durch die Tabulator-Taste

Die Referenz auf das HTML-Element, an welches das Ereignis gerichtet ist, gehört zu den wichtigsten Informationen. W3C-kompatible Browser sprechen das HTML-Element mit target an, während MSIE srcElement benutzt. Der Unterschied lässt sich durch eine Objekt-Erkennung nivilieren:

var elem = (evt.target) ? evt.target : evt.srcElement;

Attribute

                        |                                        | 
                        |                                        |
                        |                                        |
                        | pageY-y                                | pageY
pageX-x                 |                                        |
------------------      +--------------------------------------------------+
                        |                                                  |
                        |                                        |         |
                        |                                        |         |
                        |                                        |         |
                        |                                        |         |
                        |                                      y |         |
                        |                                        |         |
                        |                                        |         |
                        |                                        |         |
pageX                   |                    x                   |         |
--------------------    |    ------------------------------------+         |
                        |                                                  |
                        +--------------------------------------------------+

Event Handling, ECMAScript Language Binding