CSS, HTML und Javascript mit {stil}

Event Target, Type und Timestamp

Event target

Jedes Javascript Event bringt Informationen mit, die das Ereignis und seinen aktuellen Zustand beschreiben – z.B.

  • event target – das HTML-Element, das das Ereignis auslöste,
  • event type – die Art des Events
  • timestamp – Zeitpunkt des Events.

Das Event wird automatisch an die aufgerufende Funktion weitergegeben, aber das Script muss das Event der Funktion dennoch ausdrücklich übergeben.

event als Parameter des Event Handlers
var theTarget = document.querySelector ('.me-info-back a');
theTarget.addEventListener ('click', tellMe );
theTarget.addEventListener ('touch', tellMe );
theTarget.addEventListener ('mouseover', tellMe );

function tellMe (evt) {
    evt.preventDefault();
            …
}

Um Konflikte mit dem window.event von IE8 und davor zu vermeiden, sollte man als Namen für den Parameter nicht "event" wählen.

Javascript

Events

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.

Am Rande: Der einfachste Weg zu den Informationen zum Event führt über die Konsole: console.log(evt) liefert alle Informationen über das Event-Objekt in die Konsole des Browsers.

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
}

Bei diesem Aufbau des Event-Handlers spielt es keine Rolle, ob der Event Handler expliziet durch ein HTML-Attribut oder impliziet durch eine Eigenschaft des Elements eingebunden wurde. Die Funktion muss auch nicht geändert werden, wenn sich die Methode des Einbindens ändert.

In Feld klicken oder Feld mit der Tabulator-Taste ansteuern:

Die Referenz auf das HTML-Element, an sich das Ereignis richtet, gehört zu den wichtigsten Informationen. W3C-kompatible Browser sprechen das HTML-Element mit target an, während IE6 / IE7 und IE8 srcElement benutzen. Der Unterschied lässt sich durch eine Objekt-Erkennung eliminieren:

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

Informationen zu Maus- / Tastatur-Events

altKey (boolean)Gibt an, ob die Alt-Taste beim Feuern des Ereignisses gedrückt war.
button Syntax: event.button
Maustaste: Eine Zahl für die gedrückte Maustaste
W3C linke Maustaste = 1, mittlere Maustaste = 2, rechte Maustaste = 3
MSIE: keine Maustaste = 0, linke Maustaste = 1, rechte Maustaste = 2, rechte und linke Maustaste = 3, mittlere Maustaste = 4, linke und mittlere Maustaste = 5, mittlere und rechte Maustaste = 6, linke, mittlere und rechte Maustaste = 7
Eine Maus mit nur einer Taste wird immer nur 1 zurückgeben, eine Maus mit zwei Tasten kann 1 oder 3 zurückgeben.
buttonsBitmaske mit der Kombination der Maustasten
clientX/clientY
IE offsetX / offsetY
Mauskoordinaten relativ zum Fenster
ctrlKey (boolean)Gibt an, ob die Ctrl-Taste beim feuern des Ereignisses gedrückt war.
keyCodeLetzte gedrückte Taste. Das Zeichen mit String.fromCharCode(keyCode) lesen / IE-Event, tuts aber gut.
keyIdentifierIdentifiziert die gedrückte Taste
keyLocationOrt der Taste auf der Tastatur
metaKeyOb die Metataste beim Auslösen des Events gedrückt war
relatedTarget Gibt bei einem mouseover-Ereignis an, welches Element verlassen wurde. Bei einem mouseout gibt die Eigenschaft an, auf welchen Knoten die Maus bewegt wurde.
Alte Versionen von IE: fromElement, toElement
screenX / screenYSyntax: event.screenX / event.screenY
x-/y-Koordinate des Mauszeigers beim Eintreten des Ereignisses relativ zum Koordinatensystem des Fensters.
shiftKeyOb die Shifttaste beim Feuern des Events gedrückt war

Event Eigenschaften

bubbles (boolean)Gibt an, ob ein Ereignis aufsteigen kann.
cancelable (boolean)Gibt an, ob die vorgegebene Aktion verhindert werden kann.
currentTargetGibt die Targets (die Elemente, für die der Event Handler registriert wurde) zurück, deren Event Listener augenblicklich durchgeführt werden.
defaultPrevented (DOM3)Ob das Event gecancelt wurde oder nicht. Gibt nur dann true zurück, wenn cancelable == true und preventDefault aufgerufen wurde.
eventPhase (unsigned short)Gibt die Phase zurück, in der sich ein Ereignis augenblicklich befindet: CAPTURING_PHASE (1), AT_TARGET (2) oder BUBBLING_PHASE (3)
isTrusted (DOM3)Ob das Event vom Browser oder von einem Script gefeuert wurde
target (readonly)Referenz auf das Objekt, an welches das Ereignis ursprünglich gesendet wurde
timeStampZeit in Millisekunden, zu der ein Ereignis erzeugt wurde. Kann auf einigen Plattformen nicht verfügbar sein. In diesem Fall wird 0 zurückgegeben.
typeTyp des Ereignis (click, keyPress, load, ...) als String