4.4 Das Ereignisobjekt
Über das Ereignisobjekt haben Sie Zugriff auf weitere Informationen zum Ereignis. Sie können sich z. B. den Ort eines Mausklicks oder die Bezeichnung einer gedrückten Taste ausgeben lassen.
Es folgt ein Beispielprogramm mit einem Bild und einem Eingabefeld, siehe Abbildung 4.10.
Nach einem Mausklick auf dem Bild erscheint eine Meldung mit ausgewählten Informationen zu dem Ereignis wie in Abbildung 4.11. Anschließend erscheint eine Meldung mit allen Informationen zum Ereignis.
Nach dem Herunterdrücken einer Taste im Eingabefeld wird dieselbe Funktion durchlaufen wie oben. Es wird die Taste (A) betätigt; diese hat den Tastencode 65, siehe Abbildung 4.12.
Abbildung 4.10 Ereignisobjekt
Abbildung 4.11 Informationen zu Maus-Ereignis, Klick auf Bild
Abbildung 4.12 Informationen zu Tastatur-Ereignis, Taste »A«
Das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Ereignisobjekt</title>
<script>
function geklickt(e)
{
var quelle = e.target;
var ausgabe = "Quelle: " + quelle + "\n"
+ "ID: " + quelle.id + "\n" + "Ereignis: " + e.type + "\n"
+ "Taste: " + e.keyCode + "\n" + "Strg: " + e.ctrlKey
+ ", Shift: " + e.shiftKey + ", Alt: " + e.altKey + "\n"
+ "Bildschirm, X: " + e.screenX + ", Y: " + e.screenY + "\n\n";
alert(ausgabe);
}
</script>
</head>
<body>
<p><img id="idBild" src="im_paradies.jpg" alt="Paradies"></p>
<p><input id="idEingabe"> Eingabe</p>
<script>
document.getElementById("idBild").onclick = geklickt;
document.getElementById("idEingabe").onkeydown = geklickt;
</script>
</body></html>
Listing 4.8 Datei »event_objekt.htm«
Sowohl das Ereignis onclick als auch das Ereignis onkeydown führen zur Funktion gedrueckt(). Diese hat keine sichtbaren Parameter. Dennoch wird ein Ereignisobjekt mit Informationen übermittelt und steht zur Verfügung.
Das Ereignisobjekt wird als Parameter an die Funktion übermittelt. Es hat im vorliegenden Programm den Namen e. Sie können auch auf das Objekt zugreifen, in dem das Ereignis ausgelöst wird, also auf die Quelle des Ereignisses. Sie erreichen es über die Eigenschaft target.
In der Ausgabe ist Folgendes interessant: