Mit dem Objekt event können Sie Einzelinformationen zu Anwenderereignissen wie Mausklicks oder Tasteneingaben ermitteln und weiterverarbeiten. So können Sie bei einem Mausklick beispielsweise die genaue Position ermitteln, wo der Mausklick erfolgte, oder bei einem Tastendruck die gedrückte Taste abfragen.
Anwenderereignisse können Sie entweder überwachen, indem Sie in einem erlaubten HTML-Tag einen 
Event-Handler notieren, oder, indem Sie direkt mit Hilfe von JavaScript eine Ereignisüberwachung programmieren. Für den Fall, dass das überwachte Ereignis eintritt, können Sie eine Handler-Funktion schreiben, die das Ereignis "behandelt", also verarbeitet. Die Handler-Funktion wird automatisch aufgerufen, wenn das Ereignis eintritt. Innerhalb einer Handler-Funktion besteht auch die Möglichkeit, Eigenschaften des eingetretenen Ereignisses abzufragen. Solche Eigenschaften werden auf dieser Seite hier beschrieben.
Die meisten Browser kennen das Event-Objekt, aber leider ist die Implementierung völlig unterschiedlich gelöst. Die Eigenschaften des Event-Objekts, die auf dieser Seite beschrieben werden, berücksichtigen mehrere Browser. Nicht alle Browser kennen dieselben Eigenschaften und auch in der Syntax zur Überwachung von Ereignissen unterscheiden sie sich. Das gilt sowohl bei der Ereignisüberwachung per Event-Handler in HTML als auch für die direkte Ereignisüberwachung in JavaScript. Die Unterschiede bei den Event-Handlern werden im Abschnitt über Event-Handler näher beschrieben. Im folgenden wird zur allgemeinen Verwendung des Event-Objekts beschrieben, wie Sie mit Hilfe von JavaScript eine direkte Ereignisüberwachung programmieren. Das Beispiel zeigt auch, wie Sie eine solche Ereignisüberwachung für mehrere Browser getrennt programmieren können, ohne dass es zu Fehlermeldungen kommt.
Beispiel (Ereignisüberwachung direkt mit JavaScript programmieren):
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function TasteGedrueckt (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which) {
Tastencode = Ereignis.which;
} else if (Ereignis.keyCode) {
Tastencode = Ereignis.keyCode;
}
window.status = "Taste mit Dezimalwert " + Tastencode + " gedrückt";
}
function TasteLosgelassen (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which) {
Tastencode = Ereignis.which;
} else if (Ereignis.keyCode) {
Tastencode = Ereignis.keyCode;
}
window.status = "Taste mit Dezimalwert " + Tastencode + " losgelassen";
}
document.onkeydown = TasteGedrueckt;
document.onkeyup = TasteLosgelassen;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht Tastaturereignisse auf Dokumentebene. Das heißt, wenn der Anwender irgendeine Taste drückt, während der Anzeigebereich der HTML-Datei fokussiert ist, wird das Ereignis von der programmierten Ereignisüberwachung abgefangen und verarbeitet. Im Beispiel wird bei jedem Tastendruck in der Statuszeile des Browsers der dezimale Tastaturcode der gedrückten Taste ausgegeben.
Es werden zwei Funktionen definiert: Die Funktion TasteGedrueckt() ist die so genannte Handler-Funktion für den Fall, dass der Anwender eine Taste drückt. Die Funktion TasteLosgelassen() behandelt den Fall, dass der Anwender die gedrückte Taste wieder loslässt. Beide Funktionen erwarten einen Parameter namens Ereignis. Über diesen Parameter können die Funktionen auf Eigenschaften des Event-Objekts zugreifen. Im Internet Explorer hingegen muss über window.event auf das Event-Objekt zugegriffen werden. Daher wird direkt am Anfang der beiden Funktionen mit einer if-Anweisung abgefragt, ob der Parameter Ereignis gesetzt wurde. Wenn dies nicht der Fall ist, wird das Event-Objekt aus window.event in der Variable Ereignis gespeichert. Dadurch steht das Event-Objekt auf jeden Fall in der Variable Ereignis zur Gebrauch.
In den beiden Funktionen wird im Beispiel wird der dezimalen Tastencode der gedrückten Taste ermittelt. Nach Netscape-Syntax ist dieser in der Event-Eigenschaft which gespeichert, nach Microsoft-Syntax in der Eigenschaft keyCode. Daher wird mit einer if-else-Anweisung geprüft, welche der beiden Eigenschaften existiert (siehe Abfragen ob ein Objekt existiert). Der Tastencode wird auf diese Weise in der Variable Tastencode gespeichert und anschließend in die Statuszeile geschrieben.
Das allein genügt jedoch noch nicht zur Ereignisüberwachung. Damit die Handler-Funktionen bei Eintritt des Ereignisses automatisch aufgerufen werden, muss die Ereignisüberwachung gestartet werden. Dazu dienen die beiden Anweisungen am Ende des JavaScript-Bereichs.
Mit document.onkeydown = TasteGedrueckt; wird das Ereignis "Taste gedrückt" (onkeydown) dokumentweit überwacht. Hinter dem Gleichheitszeichen folgt der Name der Handler-Funktion, die dieses Ereignis verarbeiten soll (TasteGedrueckt). Beachten Sie, dass hier nur der Funktionsname stehen darf, kein Funktionsaufruf mit runden Klammern dahinter.
Mit document.onkeyup = TasteLosgelassen; wird das Ereignis "Taste losgelassen" (onkeyup) dokumentweit überwacht, und zur Ereignisbehandlung wird die Handler-Funktion TasteLosgelassen angegeben. Nach dem gleichen Schema können Sie auch andere Ereignisse überwachen - die Handler-Funktionen definieren Sie selber, und anstelle von onkeydown und onkeyup können Sie alle anderen üblichen Event-Handler notieren.
Beachten Sie:
Die Ereignisüberwachung des Beispiels funktioniert auch im Opera 5.12. Das Ausgeben in die Statuszeile wird jedoch erst ab Version 6 interpretiert. Im Mozilla Firefox 1.0 wird der Zugriff auf window.status aus Sicherheitsgründen standardmäßig unterbunden. Deswegen funktioniert der entsprechende Teil des Beispiels nur, wenn in den Einstellungen zu JavaScript die Option "Statuszeilentext ändern" aktiviert ist.
Wenn Sie Ereignisse dokumentweit überwachen, müssen Sie berücksichtigen, dass die Ereignisüberwachung zu unerwünschten Nebenwirkungen führen kann. Einige Anzeigebeispiele auf dieser Seite zeigen bei einem Mausereignis im Dokument ein Meldungsfenster oder verschieben ein Element an die Mausposition. Dies kann unter Umständen verhindern, dass Verweise auf der Seite angeklickt werden können. In der praktischen Anwendung sollten Sie daher auf eine solche dokumentweite Ereignisüberwachung verbunden mit Meldungsfenstern verzichten. In den meisten Fällen reicht es aus, Ereignisse für einzelne Elemente zu überwachen.
Microsoft-Syntax. Speichert, ob die Alt-Taste, die Umschalt-Taste oder die Steuerung-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.altKey)
alert("Eine Taste plus Alt-Taste wurde gedrückt!");
if (Ereignis.ctrlKey)
alert("Eine Taste plus Steuerung-Taste wurde gedrückt!");
if (Ereignis.shiftKey)
alert("Eine Taste plus Umschalt-Taste wurde gedrückt!");
}
document.onkeypress = Tastendruck;
</script>
</head><body>
</body></html>
Erläuterung:
Im Beispiel wird überwacht, ob der Anwender eine Taste drückt (onkeypress). Wenn ja, wird abgefragt, ob zusätzlich die Alt-, Steuerung- oder Umschalt-Taste gedrückt wurde. In diesem Fall wird jeweils eine entsprechende Meldung ausgegeben.
Beachten Sie:
Opera führt die Handler-Funktion nicht aus, wenn die Alt-Taste gedrückt wird. Bei einem Mausklick, bei dem die Alt-Taste gedrückt wurde, hat altKey trotzdem den Wert false. Bei einem Mausklick mit gedrückter Umschalt-Taste ist shiftKey im Opera 7 unzuverlässig. In Opera 5.12 existieren die Eigenschaften zwar, sie liefern jedoch offenbar unsinnige Werte.
Seien Sie vorsichtig beim Ausprobieren dieses Beispiels. Einige Browser (z.B. Konqueror) verfügen über voreingestellte Shortcuts. So führt die Tastenkombination "Q+Strg" in Konqueror unweigerlich zum Schließen des Browserfensters, da die Shortcuts Vorrang vor eventuellen JavaScript-Anweisungen haben.
Microsoft-Syntax. Speichert, welche Maustasten gedrückt wurden: 1 für die linke Maustaste, 2 für die rechte Maustaste und 4 für die mittlere Maustaste. Die Werte können kombiniert werden, etwa 5 für die mittlere und die linke Maustaste.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.button) {
if (Ereignis.button == 1) {
alert("Linke Maustaste gedrückt");
} else {
alert("Andere Maustaste gedrückt");
}
}
}
document.onmousedown = Tastendruck;
</script>
</head><body>
<p>Klicken Sie auf das Dokument</p>
</div>
</body></html>
Erläuterung:
Im Beispiel wird überwacht, ob der Anwender eine Maustaste drückt (onmousedown), wärend sich der Mauszeiger über einem div-Element befindet. Wenn ja, wird abgefragt, ob es die linke Maustaste war und eine entsprechende Meldung ausgegeben.
Beachten Sie:
Diese Eigenschaft stammt ursprünglich von Microsofts Internet Explorer und verhält sich dort wie beschrieben. Sie ist aber auch im Event-Handling beim DOM definiert, hat dort jedoch eine andere Bedeutung: 0 für die linke Maustaste, 1 für die mittlere Maustaste und 2 für die rechte Maustaste. Diese Bedeutung erwies sich jedoch nicht als praktikabel, es kann z.B. über dieses Schema nicht abgefragt werden, ob mehrere Maustasten gleichzeitig gedrückt wurden. Ältere Operas bis hin zu Version 7 haben darüber hinaus ihre eigene Belegung: 1 für die linke Maustaste, 2 für die rechte Maustaste und 3 für die mittlere Maustaste. Opera 8 benutzt die W3C-Definition. Mozilla Firefox 1.0 unterstützt button ebenfalls gemäß dem DOM-Standard. Konqueror 3.3 verhält sich dagegen wieder wie der Internet Explorer. Safari 1.2 erkennt irrtümlich die linke und die mittlere Maustaste immer als linke Maustaste. Das Beispiel, das sich auf die linke Maustaste beschränkt, liefert daher nur im Internet Explorer, älteren Opera-Versionen und mit Konqueror sinnvolle Ergebnisse. Die Benutzung von button in den verschiedenen Browsern würde eine komplizierte Browserweiche erfordern, um die gedrückte Maustaste zuverlässig in Erfahrung zu bringen.
Opera 5 und 6 lösen das dokumentweite mousedown-Ereignis nur bei einem Klick auf den Teil des Fensters aus, der vom Inhalt der Seite ausgefüllt ist. Da das Anzeigebeispiel nur dürftigen Inhalt enthält, reagiert nur ein schmaler Bereich am Fensteroberrand auf die Mausklicks.
Microsoft-Syntax. Speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY) der Cursorposition relativ zur oberen linken Ecke des Anzeigefensters, wenn z.B. Mausereignisse überwacht werden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (document.all) {
document.all.Springer.style.left = Ereignis.clientX;
document.all.Springer.style.top = Ereignis.clientY;
} else if (document.getElementById) {
document.getElementById("Springer").style.left = Ereignis.clientX + "px";
document.getElementById("Springer").style.top = Ereignis.clientY + "px";
}
}
document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>
Erläuterung:
Das Beispiel enthält einen div-Bereich, der mit Hilfe von Stylesheet-Angaben absolut positioniert wird. Wenn der Anwender mit der Maus in das Fenster klickt, wird der Bereich an die Position verschoben, an der der Mausklick erfolgt. Der div-Bereich wird entweder über document.all oder document.getElementById() angesprochen, je nachdem, welches Objekt zur Verfügung steht.
Beachten Sie:
In Opera 5.12 funktioniert das Auslesen der Eigenschaften clientX und clientY problemlos. Das Beispiel funktioniert allerdings erst ab Version 6 korrekt, da Version 5.12 beim Setzen der CSS-Eigenschaft top über JavaScript einen Pixelwert ohne Einheit (px) erwartet.
Gehen Sie mit dem dargestellten Beispiel vorsichtig um. Es kann Ihnen passieren, dass der "Layer" sich über wichtige andere Seitenbestandteile schiebt und dadurch Verweise zu anderen Seiten eventuell überdeckt werden.
Microsoft-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert) der gedrückten Taste.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
alert(Ereignis.keyCode);
}
document.onkeypress = Tastendruck;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht, ob bei aktivem Dokument eine Taste gedrückt wurde. Wenn ja, wird deren Wert in einem Meldungsfenster ausgegeben.
Beachten Sie:
Mozilla Firefox 1.0 kennt die Eigenschaft keyCode zwar, sie enthält jedoch nur bei den Ereignissen keyup und keydown sinnvolle Werte. Bei keypress-Ereignissen hat die Eigenschaft bei normalen Tasten, z.B. Buchstaben, immer den Wert 0. Die Eigenschaft 
which liefert immer den korrekten Tastencode, daher sollte Sie zunächst die Existenz jener Eigenschaft abfragen.
Netscape-Syntax. Speichert die aktuelle Breite (layerX) und Höhe (layerY) eines Objekts, wenn das Ereignis onresize überwacht wird, oder die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) der Cursorposition relativ zur oberen linken Ecke eines Layer-Bereichs, wenn z.B. Mausereignisse überwacht werden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function wResize (Ereignis) {
window.status = Ereignis.layerX + "x" + Ereignis.layerY;
return true;
}
window.onresize = wResize;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht, ob der Anwender das Anzeigefenster des Browsers verändert. Beim Verändern der Größe des Anzeigefensters wird so oft wie möglich die Handler-Funktion wResize aufgerufen. Diese schreibt in die Statuszeile des Browsers die aktuelle Fenstergröße.
Beachten Sie:
Netscape 6.1 interpretiert zwar den Event-Handler, jedoch ist in den Eigenschaften layerX und layerY jeweils der Wert 0 gespeichert. Mozilla Firefox 1.0 interpretiert zwar das obige onresize-Beispiel nicht, kennt die Eigenschaften layerX und layerY aber bei Mausereignissen.
Netscape-Syntax. Speichert, ob Zusatztasten wie die Alt-Taste oder die Umschalt-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function ALT_Wert (Ereignis) {
if (Ereignis.modifiers & Event.ALT_MASK)
alert("Maus geklickt und Alt-Taste gedrueckt!");
}
document.onmouseup = ALT_Wert;
</script>
</head><body>
</body></html>
Erläuterung:
Im Beispiel wird das Meldungsfenster dann angezeigt, wenn der Anwender mit der Maus in das Dokument geklickt hat und gleichzeitig die Alt-Taste gedrückt hält. Die verwendete Syntax benutzt Bit-Operatoren. Fragen Sie einfach so ab wie in dem Beispiel. Folgende Ausdrücke sind erlaubt:
Ereignis.modifiers & Event.ALT_MASK, um die Alt-Taste abzufragen
Ereignis.modifiers & Event.CONTROL_MASK, um die Steuerung-Taste abzufragen
Ereignis.modifiers & Event.SHIFT_MASK, um die Umschalt-Taste abzufragen
Ereignis.modifiers & Event.META_MASK, um die AltGr-Taste abzufragen
Diese Angaben sind natürlich abhängig davon, ob die verwendete Tastatur eine solche Taste überhaupt enthält.
Beachten Sie:
Netscape 6.1 kennt die Eigenschaft modifiers nicht mehr.
Microsoft-Syntax. Speichert die horizontalen Pixel (offsetX) und die vertikalen Pixel (offsetY) der Cursorposition relativ zur oberen linken Ecke des Elements, das ein Ereignis ausgelöst hat.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Coords () {
alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY);
}
</script>
</head><body>
<form action="">
<input type="button" value="Klick doch mal auf mich drauf" onClick="Coords()">
</form>
</body></html>
Erläuterung:
Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird die Funktion Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks relativ zur oberen linken Ecke des Element, also des Buttons, aus.
Netscape-Syntax. Speichert die horizontalen Pixel (pageX) und die vertikalen Pixel (pageY) der Cursorposition relativ zur oberen linken Ecke der Seite, wenn z.B. Mausereignisse überwacht werden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function LayerPosition (Ereignis) {
if (document.layers) {
document.layers[0].left = Ereignis.pageX;
document.layers[0].top = Ereignis.pageY;
} else if (document.getElementById) {
document.getElementById("layer").style.left = Ereignis.pageX + "px";
document.getElementById("layer").style.top = Ereignis.pageY + "px";
}
}
document.onmouseup = LayerPosition;
</script>
<style type="text/css">
#layer { position:absolute; top:50px; left:50px; width:100px; height:100px;
background-color:#FFE0FF; border:solid 1px #000000; }
</style>
</head><body>
<div id="layer">Ein Layer</div>
</body></html>
Erläuterung:
Das Beispiel enthält einen simulierten Layer. Wenn der Anwender mit der Maus in das Fenster klickt und die Maustaste dann wieder loslässt, wird der Layer an die Position verschoben, an der die Maus losgelassen wurde.
Da die Eigenschaften pageX und pageY auch von anderen Browsern interpretiert werden, wurde das Beispiel entsprechend kompatibel gestaltet. Statt eines Layers wird mit einem absolut positionierten div-Bereich ein Layer ohne layer-Element simuliert. Wenn die Maustaste gedrückt und wieder losgelassen wird, wird die Funktion LayerPos() aufgerufen. Innerhalb dieser Funktion wird geprüft, ob der Browser das Objekt document.layers kennt. Ist das der Fall, erfolgt die Zuweisung des Wertes über das Layer-Objekt. Diesem Zweig der Anweisung folgt Netscape 4.x. Kennt der Browser das Objekt dagegen nicht, dann wird im else-Zweig geprüft, ob er die Methode document.getElementById() kennt. Anschließend erfolgt die Zuweisung der Eigenschaft an das Element entsprechend der DOM-Syntax. Beide Zweige der if/-else-Anweisung verwenden jedoch die gleichen Event-Eigenschaften.
 |
Speichert die horizontalen Pixel (screenX) und die vertikalen Pixel (screenY) der Cursorposition absolut gesehen zum Bildschirm, wenn z.B. Mausereignisse überwacht werden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
alert("x-Wert: " + Ereignis.screenX + " / y-Wert: " + Ereignis.screenY);
}
document.onclick = Mausklick;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht, ob der Anwender in das Dokument klickt. Wenn ja, werden in einem Meldungsfenster die absoluten Bildschirmkoordinaten ausgegeben, an denen die Maustaste gedrückt wurde.
Netscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert) der gedrückten Taste und bei Mausereignissen, welche Maustaste gedrückt wurde.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Position (Ereignis) {
alert("Maustaste: " + Ereignis.which);
}
document.onmousedown = Position;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht, ob der Anwender die Maustaste drückt. Wenn ja, wird in einem Meldungsfenster ausgegeben, welche Maustaste gedrückt wurde. Die linke Maustaste hat den Wert 1, die mittlere (sofern vorhanden) den Wert 2 und die rechte (sofern vorhanden) den Wert 3.
Beachten Sie:
Opera erlaubt das dokumentweite Verarbeiten von Rechtsklicks erst ab Version 8, in Versionen darunter wird die Handler-Funktion bei einem Rechtsklick nicht ausgeführt.
Safari 1.2 interpretiert nur die linke Maustaste.
Im Mozilla Firefox (Linux) und Konqueror ist es durch das aufspringende Meldungsfenster nicht möglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das onmousedown-Ereignis nicht dokumentweit mit einem Meldungsfenster verknüpfen.
Speichert, welches Ereignis eingetreten ist. Der gespeicherte Wert ist der Name des Events ohne das Präfix on, also beispielsweise mouseup oder keypress oder select.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Auswertung (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
alert("Ereignis: " + Ereignis.type);
}
document.onmouseup = Auswertung;
document.onkeyup = Auswertung;
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel überwacht zwei Ereignisse, nämlich, ob der Anwender die Maustaste drückt und ob er eine Taste drückt. In beiden Fällen wird die gleiche Handler-Funktion Auswertung aufgerufen. Sie gibt in einem Meldungsfenster aus, welches der Ereignisse eingetreten ist.
Beachten Sie:
Im Mozilla Firefox (Linux) und Konqueror ist es durch das aufspringende Meldungsfenster nicht möglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das onmouseup-Ereignis nicht dokumentweit mit einem Meldungsfenster verknüpfen.
Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Cursorposition relativ zur oberen linken Ecke des Elternelements von dem Element, das ein Ereignis ausgelöst hat. Wenn ein absolut positionierter Bereich das Elternelement ist, ist dessen obere linke Ecke der Bezugspunkt. Wenn das auslösende Element sonst kein Elternelement hat, gilt die linke obere Ecke des Dokuments als Bezug.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Coords () {
if (window.event)
alert("x = " + window.event.x + "/ y = " + window.event.y);
}
</script>
<style type="text/css">
div { position:relative; left:100px; width:200px; padding:30px; background-color:#FFFFE0; }
div p { margin:0; padding:10px; background-color:#FFFFB0; }
</style>
</head><body>
<div><p onClick="Coords()">Klick mich</p></div>
</body></html>
Erläuterung:
Das Beispiel enthält einen relativ positionierten div-Bereich und innerhalb davon einen gewöhnlichen Textabsatz. Beim Anklicken des Absatzes wird die Funktion Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks aus. Die Werte beziehen sich dabei auf die linke obere Ecke des div-Bereichs.
Beachten Sie:
Versionen des Internet Explorers vor der Version 5 speichern in diesen Eigenschaften die Position relativ zum Fenster. Ab dem Internet Explorer 5.0 ist in dieser Eigenschaft die Position zu einem relativ positionierten Elternelement (z.B. Tabellenzellen) gespeichert. Für absolut positionierte Elternelemente dagegen enthält die Eigenschaft wieder die Position relativ zum Fenster.
Die Eigenschaften x und y kennen auch andere Browser, aber sie haben dort eine unterschiedliche Bedeutung. In Netscape 4 sind sie identisch mit layerX und layerY, während Opera 7 weitestgehend dem Internet Explorer folgt. Das vorliegende Beispiel ist daher auf den Internet Explorer und Opera ab Version 7 zugeschnitten.
© 2005 Impressum
SELFHTML/Navigationshilfen 
altKey, ctrlKey, shiftKey
