Event target
Das Event wird automatisch an die aufgerufende Funktion weitergegeben, aber das Script muss das Event der Funktion dennoch ausdrücklich als Parameter übergeben.
event als Parameter des Event Handlers
const target = document.querySelector ('#elem');
function tellMe (event) {
console.log (event);
let nodeName = event.target.nodeName;
…
}
target.addEventListener ('click', tellMe );
target.addEventListener ('touch', tellMe );
target.addEventListener ('mouseover', tellMe );
Das Argument event im Funktionsaufruf function tellMe (event) 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.
Um Konflikte mit dem window.event alter Browser zu vermeiden, sollte früher nicht event als Name gewählt werden. Die meisten Scripte wählen einfach e oder evt als Abkürzung.
Javascript
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.
▶ MouseEvent {isTrusted: true, screenX: 943, screenY: 318, clientX: 927, clientY: 232, …}
Anpassung der Referenzen auf das Event-Objekt
Die Referenz auf das HTML-Element, auf dem sich Event abgespielt hat, gehört zu den wichtigsten Informationen. W3C-kompatible Browser sprechen das HTML-Element mit target an.
In Feld klicken oder Feld mit der Tabulator-Taste ansteuern:
document.querySelector("elem").addEventListener ("click", function (e) {
let elem = e.target;
let position = e.x + "/" + e.y;
…
});
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 Eine Maus mit nur einer Taste wird nur 1 zurückgeben, eine Maus mit zwei Tasten kann 1 oder 3 zurückgeben. |
| buttons | Bitmaske mit der Kombination der Maustasten |
| clientX/clientY | Mauskoordinaten relativ zum Fenster |
| ctrlKey (boolean) | Gibt an, ob die Ctrl-Taste beim feuern des Ereignisses gedrückt war. |
| keyCode | Letzte gedrückte Taste. Das Zeichen mit String.fromCharCode(keyCode) lesen / IE-Event, tuts aber gut. |
| metaKey | Ob die Metataste beim Auslösen des Events gedrückt war |
| movementX / movementY | x-/y-Koordinaten des Mauszeigers relativ zur Position des letzten mousemove-Events |
| offsetX / offsetY | x-/y-Koordinaten des Mauszeigers relativ zur Position des Zielelements. |
| pageX / pageY | x-/y-Koordinaten des Mauszeigers relativ zum Dokument. |
| relatedTarget | Gibt bei einem mouseover-Ereignis an, welches Element verlassen wurde. Bei einem mouseout gibt die Eigenschaft an, auf welchen Element die Maus bewegt wurde. |
| screenX / screenY | Syntax: event.screenX / event.screenY x-/y-Koordinate des Mauszeigers beim Eintreten des Ereignisses relativ zum Koordinatensystem des Fensters. |
| shiftKey | Ob die Shifttaste beim Feuern des Events gedrückt war |
| which | Maustaste, die beim Eintreten des Events gedrückt war. |
Informationen zu Touch-Events
Jedes Event bringt seine individuellen Eigenschaften mit. Touchscreens haben darüber hinaus eigene Events mit speziellen Eigenschaften.
| changedTouches | Liste aller Finger, die am aktuellen Event beteiligt sind: Beim touchstart eine Liste der Finger beim touchmove eine Liste der Finger, die sich bewegt haben beim touchend eine Liste der Finger, die die Touchoberfläche verlassen haben length gibt die Anzahl der Finger zurück |
| targetTouches | Alle Touch-Ziele, die zu diesem Event gehören |
| touches | Eine Liste aller Finger, die momentan auf der Touchoberfläche liegen |
| scale | Der Abstand zwischen zwei Fingern seit dem Start des Events. Der Anfangswert ist 1.0. Die Geste für ein Pinch Close (Verkleinern mit zwei Fingern – Herauszoomen) ist ein Wert < 1.0, die Geste für ein Pinch Open (Vergrößern – Zoomen) ist ein Wert > 1.0 |
| rotation | Das Delta eines Drehen des Geräts seit dem Start des Events in Grad. positiv bei einer Drehung im Uhrzeigersinn, negativ sonst. Der Anfangswert ist 0.0 |
Generelle Eigenschaften von Events
| bubbles (boolean) | Gibt an, ob ein Ereignis aufsteigen kann. |
| cancelable (boolean) | Gibt an, ob die vorgegebene Aktion verhindert werden kann. |
| currentTarget | Gibt 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 |
| timeStamp | Zeit in Millisekunden, zu der ein Ereignis erzeugt wurde. Kann auf einigen Plattformen nicht verfügbar sein. In diesem Fall wird 0 zurückgegeben. |
| type | Typ des Ereignis (click, keyPress, load, ...) als String |
Veraltete Techniken der Objekt-Erkennung
Um den unterschiedlichen Umgang mit dem Event-Objekt zwischen den Browsern anzupassen, wurden früher wilde Konstruktionen zur Objekt-Erkennung eingesetzt:
function myFunc(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
// Verarbeitung des Ereignisses
}
Die Abfrage egalisierte die unterschiedlichen Auffassungen längst vergessener Browser. Das ist heute nicht mehr nötig.