SELFHTML: JavaScript / Objektreferenz / event
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Aufgaben, Eigenschaften und Methoden das event-Objekt in JavaScript hat.
Keywords: SELFHTML, JavaScript, Objekte, event, altKey, ctrlKey, shiftKey, clientX, clientY, keyCode, layerX, layerY, modifiers, offsetX, offsetY, pageX, pageY, screenX, screenY, which, type, x,y
Date: 2005-11-16T00:32:37+01:00

| # event
| event: Allgemeines zur Verwendung ### Eigenschaften: altKey, ctrlKey, shiftKey (Sondertasten, Microsoft) button (Maustastencode, Microsoft) clientX, clientY (Anzeigebereich-relative Mauszeiger-Position, Microsoft) keyCode (Tastaturcode, Microsoft) layerX, layerY (Layer-relative Mauszeiger-Position, Netscape) modifiers (Sondertasten, Netscape) offsetX, offsetY (Objekt-relative Mauszeiger-Position, Microsoft) pageX, pageY (Dokument-relative Koordinaten, Netscape) screenX, screenY (Bildschirm-relative Mauszeiger-Position, Netscape) which (Tastatur-/Maustastencode, Netscape) type (Art des Ereignisses, Netscape) x,y (Elternelement-relative Mauszeiger-Position, Microsoft)

## event: Allgemeines zur Verwendung

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;
      }
      document.formular.ausgabe.value = "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;
      }
      document.formular.ausgabe.value = "Taste mit Dezimalwert " + Tastencode + " losgelassen";
    }

    document.onkeydown = TasteGedrueckt;
    document.onkeyup = TasteLosgelassen;
    </script>
    </head><body>

    <form action="" name="formular">
    <p><input type="text" name="ausgabe" readonly="readonly" size="50"></p>
    </form>

    </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 der dezimale Tastaturcode der gedrückten Taste in einem Formularfeld 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.

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.

## altKey, ctrlKey, shiftKey

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 Steuerung plus "Q" in Konqueror unweigerlich zum Schließen des Browserfensters, da die Shortcuts Vorrang vor eventuellen JavaScript-Anweisungen haben.

## button

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 verhält sich dagegen wieder wie der Internet Explorer. Safari 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, in älteren Opera-Versionen und im 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.

## clientX, clientY

Microsoft-Syntax. Speichert die horizontalen Pixel (`clientX`) und die vertikalen Pixel (`clientY`) der Mauszeiger-Position relativ zur oberen linken Ecke des Anzeigebereichs des Fensters, in dem das aktuellen Dokument dargestellt wird. Bezieht sich z.B. auf Mausereignisse.

### 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.getElementById) {
        document.getElementById("Springer").style.left  = Ereignis.clientX + "px";
        document.getElementById("Springer").style.top = Ereignis.clientY + "px";
      } else if (document.all) {
        document.all.Springer.style.left = Ereignis.clientX;
        document.all.Springer.style.top = Ereignis.clientY;
      }
    }

    document.onmousedown = Mausklick;
    </script>
    </head><body>
    <div id="Springer" style="background-color:#FFE0FF; position:absolute;
    top:100px; left:100px; width:100px; height:100px;"></div>
    <p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
    </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.getElementById() oder document.all 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.

## keyCode

Microsoft-Syntax. Speichert bei Tastaturereignissen den Tastatur-Scancode der gedrückten Taste.

Der Tastaturscancode hat nicht direkt etwas mit dem Zeichencode des getippten Zeichens (z.B. ASCII, Unicode) zu tun. Viele Codes sind identisch (bei Buchstaben und Ziffern), aber es können auch Tasten abgefragt werden, die für sich genommen gar kein echtes "Zeichen" sind, z.B. die Shift-Tasten, die Funktionstasten F1 bis F12 oder das numerische Tastenfeld.

### 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>
    <p>Bitte drücken Sie irgendwelche Tasten!</p>
    </body></html>

### Erläuterung:

Das Beispiel überwacht, ob bei aktivem Dokument eine Taste gedrückt wurde. Wenn ja, wird deren Scancode in einem Meldungsfenster ausgegeben.

### Beachten Sie:

Unser Beispiel deaktiviert die Wirkung der gedrückten Tasten nicht. Drücken Sie z.B. die F1-Taste, wird der Scancode (112) angezeigt, danach ruft der Browser aber wahrscheinlich seine Hilfefunktion auf.

Konqueror 3.1 kennt die Eigenschaft `keyCode` noch nicht. 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.

## layerX, layerY

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 Mauszeiger-Position relativ zur oberen linken Ecke eines Layer-Bereichs, wenn Mausereignisse überwacht werden.

Als Layer gilt unter Netscape 4 ein layer-Element oder ein durch absolute Positionierung simulierter Layer. Netscape ab Version 6 sowie Mozilla Firefox unterstützen das alte Layer-Konzept nicht mehr. `layerX` und `layerY` beziehen sich in diesen Browsern auf die obere linke Ecke des nächsthöheren Elements mit `position:absolute` oder `position:relative`, in dem das Element liegt, bei dem das Mausereignis passierte. Falls das Element in keinem solchen Layer liegt, beziehen sich `layerX` und `layerY` in allen genannten Browsern auf die linke obere Ecke des Dokuments.

### 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.0 und Mozilla Firefox 1.0 führen zwar die Handler-Funktion aus, in den Eigenschaften `layerX` und `layerY` ist jedoch nur der Wert `0` gespeichert. Konqueror kennt `layerX`/`layerY` nur bei Mausereignissen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    #karte { position:relative; }
    </style>
    <script type="text/javascript">
    function bildklick (Ereignis) {
      if (!Ereignis)
        Ereignis = window.event;
      alert("x-Wert: " + Ereignis.layerX + " / y-Wert: " + Ereignis.layerY);
    }
    function starte_ueberwachung () {
      document.images["karte"].onclick = bildklick;
    }
    window.onload = starte_ueberwachung;
    <script>
    </head><body>

    <p><img src="../../../html/grafiken/anzeige/karte.png" width="345" height="312"
            alt="Karte von S&uuml;dwestdeutschland" name="karte" id="karte"></p>

    </body></html>

### Erläuterung:

Das Beispiel veranschaulicht die Verwendung der Eigenschaften `layerX` und `layerY` bei Mausereignissen. Im Dokumentkörper wird eine Grafik mit dem Namen und der ID `karte` notiert. Beim Laden des Dokuments wird über den Event-Handler onload die vorher notierte Funktion `starte_ueberwachung()` ausgeführt. Diese spricht über document.images die Grafik an und weist ihr eine Handler-Funktion für das Klick-Ereignis zu. Bei einem Mausklick auf die Grafik wird somit die Funktion `bildklick()` ausgeführt. In dieser Funktion werden die Eigenschaften `layerX` und `layerY` des Event-Objekts in einem Meldungsfenster ausgegeben.

Im Dokumentkopf ist zusätzlich eine Stylesheet-Angabe notiert, die der Grafik die CSS-Eigenschaft `position:relative` zuweist. Damit wird sie von Netscape ab Version 6 und Mozilla Firefox als "Layer" angesehen. Somit beziehen sich die ausgegebenen Koordinaten auf die linke obere Ecke der Grafik.

## modifiers

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.

## offsetX, offsetY

Microsoft-Syntax. Speichert die horizontalen Pixel (offsetX) und die vertikalen Pixel (offsetY) der Mauszeiger-Position 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 Elements, also des Buttons, aus.

### Beachten Sie:

Konqueror 3.1 interpretiert diese Angaben noch nicht korrekt.

Der Internet Explorer 6, Opera 8.5 und Konqueror 3.4.2 interpretieren `offsetX`/`offsetY` unterschiedlich, wenn Sie dem betreffenden Element mit CSS einen Rahmen (border) oder Innenabstand (padding) geben. Die Browser sind sich nicht einig, wo die obere linke Ecke eines Elements im CSS-Boxmodell zu verorten ist. Konqueror und Safari gehen von der äußeren Rahmen-Box als Koordinatenursprung aus. Dies erscheint am logischsten. Der Internet Explorer geht von der Innenabstands-Box aus, Opera von der Inhaltsbereichs-Box, also der innersten. Bei einem Klick in den Rahmen- oder Innenabstandsbereich liefert Opera also negative bzw. um die Größe des jeweiligen Rahmens und Innenabstands verminderte Werte. Der Internet Explorer liefert folglich bei einem Klick auf den Rahmen negative bzw. um die Größe des Rahmen verminderte Werte. Setzen Sie bei diesen Browsern `offsetX` und `offsetY` daher am besten nur bei Elementen ohne `border` und `padding` ein.

Bei dem dargestellten Beispiel setzt Safari für `offsetX` den Koordinatenursprung am linken Rand des Buttons, für `offsetY` in der Mitte des Anzeigebereiches des Fensters. Die Darstellung der Buttons unterliegt bei Safari nicht dem Browser und CSS, sondern dem Betriebssystem - daher die unterschiedliche Interpretation der Koordinaten.

## pageX, pageY

Netscape-Syntax. Speichert die horizontalen Pixel (pageX) und die vertikalen Pixel (pageY) der Mauszeiger-Position relativ zur oberen linken Ecke des Dokuments.

### 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:100px; left:100px; width:100px; height:100px;
             background-color:#FFE0FF; border:solid 1px #000000; }
    </style>
    </head><body>
    <div id="layer">Ein Layer</div>
    <p>Klicken Sie irgendwo ins Dokument und der Layer folgt der Maus dorthin.</p>
    </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.

## screenX, screenY

Speichert die horizontalen Pixel (screenX) und die vertikalen Pixel (screenY) der Mauszeiger-Position absolut gesehen zum Bildschirm.

### 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>
    <p>Klicken Sie irgendwo ins Dokument, um die Position auszugeben.</p>
    </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.

### Beachten Sie:

Opera unter Linux, getestet mit Version 9.02 und früher, liefert unter Umständen falsche Werte für `screenX` und `screenY`. Anstelle die absolute Mausposition in Bezug auf den gesamten Bildschirm wiederzugeben, werden Koordinaten relativ zur oberen linken Ecke des Dokuments angegeben - wie bei pageX und pageY.

## which

Netscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII-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>
    <p>Klicken Sie irgendwo ins Dokument.</p>
    </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:

In verschiedenen Browsern 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.

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 interpretiert linke und mittlere Maustaste gleich, die rechte gar nicht.

## type

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>
    <p>Drücken Sie eine Taste oder klicken Sie irgendwo ins Dokument.</p>
    </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.

Safari 1.0 reagiert nicht auf Tastaturereignisse, wohl aber auf Mausklicks. Spätere Versionen von Safari reagieren korrekt.

## x, y

Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Mauszeiger-Position relativ zur oberen linken Ecke des relativ positionierten Elternelements von dem Element, das ein Ereignis ausgelöst hat. Wenn das auslösende Element kein relativ positioniertes 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 Anzeigebereich des Fensters, genau wie clientX und clientY. Ab der Version 5.0 wendet der Internet Explorer das beschriebene Verhalten an.

Die Eigenschaften `x` und `y` kennen neben dem Internet Explorer auch andere Browser, aber sie haben dort mitunter eine unterschiedliche Bedeutung. In Netscape 4 sind sie identisch mit layerX und layerY. Auch Opera, Safari und Konqueror kennen `x` und `y`. Im Safari und Konqueror sind `x` und `y` immer identisch mit clientX und clientY, relativ positionierte Elternelemente werden ignoriert. Opera 7 folgt korrekt der Microsoft-Definition, ab Version 8 treten jedoch Unstimmigkeiten auf, wenn das fragliche Element einen Rahmen ( `border`) oder Innenabstand (`padding`) besitzt. Dieser Fehler ist in Version 8.5 noch nicht behoben. Das Beispiel funktioniert daher in diesem Browser nicht zuverlässig.

| history
| links

© 2007 Impressum