Manchmal benötigen Sie Informationen zu einem Ereignis. Zum Beispiel, welche Taste bei einem keypress-Ereignis gerade gedrückt wird, oder an welchen Koordinaten ein Mausklick erfolgt ist.

Beispiel

<div id="Zielgebiet" style="border: solid silver 1px; width: 640px; height: 480px; cursor: pointer;"></div>
<p><span id="kein_Spiel">Das Zielgebiet ist 640 Pixel breit und 480 Pixel hoch. Klicken Sie in das Zielgebiet, um das Spiel zu starten.</span>
<span id="Spiel" style="display: none;">Versuchen Sie, den Pixel <span id="links"></span> von links und <span id="oben"></span> von oben anzuklicken.</span></p>
<p id="Ergebnis" style="font-weight: bold;"></p>
<script type="text/javascript">
$(document).ready( function() {
   var Spiel = false;
   var links = 0;
   var oben = 0;   
   $("#Zielgebiet").click( function( Ereignis ) {
      if(Spiel == false) {
         links = Math.round(Math.random() * 640);
         oben = Math.round(Math.random() * 480);
         $("#links").html(links);
         $("#oben").html(oben);
         $("#kein_Spiel").hide();
         $("#Spiel").show();
         $("#Ergebnis").html("");
         Spiel = true;
      }
      else {
         var horizontal = Math.abs(Ereignis.clientX - links);
         var vertikal = Math.abs(Ereignis.clientY - oben);
         $("#Ergebnis").html(horizontal + " Pixel horizontal daneben und " + vertikal + " Pixel vertikal daneben!");
         $("#Spiel").hide();
         $("#kein_Spiel").show();
         Spiel = false;
      }
   } );
} );
</script>

Erläuterung

Das Beispiel enthält ein kleines Spiel. In dem 640 mal 480 Pixel großen div-Bereich Zielgebiet soll der Anwender eine bestimmte Pixelposition möglichst genau treffen. Zunächst wird er aufgefordert, in den Bereich zu klicken, um das Spiel zu starten. Dann wird per Zufall (mit Math.random()) eine Pixelposition ermittelt, und der Anwender erhält eine Aufforderung wie Versuchen Sie, den Pixel 139 von links und 312 von oben anzuklicken. In dem leeren Bereich, von dem er nur weiß, dass dieser insgesamt 640 Pixel breit und 480 Pixel hoch ist, muss er nun versuchen, ohne weitere Hilfsmittel die geforderten Koordinaten mit viel Augenmaß zu treffen und anzuklicken. Klickt er eine Position an, wird ermittelt und ausgegeben, wie weit er horizontal und vertikal daneben lag.

Die gesamte Spielkontrolle wird in einer anonymen Funktion abgewickelt, die dem click-Event übergeben wird, wenn dieser im Bereich Zielgebiet stattfindet. Im hier relevanten Zusammenhang ist wichtig, dass diese anonyme Funktion einen Parameter übergeben bekommt. Es ist egal, wie Sie ihn nennen – im Beispiel heißt er Ereignis. Oftmals wird einfach nur ein kleines e (für “event”) übergeben. Dieser Parameter ist ein Zeiger auf das Ereignisobjekt. Er ermöglicht Ihnen, innerhalb der Funktion auf Eigenschaften des Events – im Beispiel auf Eigenschaften des click-Events – zuzugreifen. Das Beispiel benötigt den Parameter, um die genaue Pixelposition zu ermitteln, die der Anwender angeklickt hat, um so das Ergebnis zu errechnen. Mit Ereignis.clientX bzw. Ereignis.clientY werden die angeklickten Pixelpositionen für links und oben, gemessen an der linken oberen Ecke des Zielgebiet-divs. Die ermittelten Werte werden in eine Berechnung eingebaut, welche die Abweichung von der zu treffenden Position errechnet.

Die verfügbaren Eigenschaften sind diejenigen des event-Objekts von JavaScript, genauer, diejenigen davon, die der ausführende Browser kennt, sowie einige „normalisierte“ Eigenschaften, die jQuery zur Verfügung stellt, um aus der Vergangenheit stammende, unterschiedliche Namen für die gleiche Eigenschaft auszubügeln.

Nachfolgende Tabelle listet Eigenschaften des Ereignisobjekts auf, die für die meisten Fälle genügen dürften. Die Eigenschaften der linken Spalte können Sie auf eine Ereignisvariable wie die obige Variable Ereignis anwenden, die Sie der ereignisbehandelnden Funktion übergeben.

Event-Eigenschaft(en) Bedeutung
clientX, clientY Pixelposition von links (clientX) und oben (clientY), gemessen von der linken oberen Ecke des Bezugselements. Anwendbar z.B. auf alle Mausereignisse.
pageX, pageY Pixelposition von links (pageX) und oben (pageY), gemessen von der linken oberen Ecke des Dokuments. Anwendbar z.B. auf alle Mausereignisse.
altKey, ctrlKey,
metaKey, shiftKey
Gibt true oder false zurück, je nachdem, ob die entsprechende Sondertaste gedrückt ist oder nicht. Anwendbar sowohl auf Tastatur- als auch auf Mausereignisse
target Gibt das Objekt des Elements zurück, das eigentlich von dem Ereignis betroffen ist, wenn dieses das Ereignis aber gar nicht behandelt. So ist es etwa möglich, document-global auf das Ereignis click zu reagieren und das Objekt des Elements zu ermitteln, das angeklickt wurde.
which Speichert bei Tastaturereignissen den dezimalen Code (ASCII-Wert) der gedrückten Taste und bei Mausereignissen, welche Maustaste gedrückt wurde.