SELFHTML: JavaScript / Objektreferenz / event

SELFHTML/Navigationshilfen JavaScript/DOM Objektreferenz
	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

SELFHTML/Navigationshilfen JavaScript/DOM Objektreferenz

event

Eigenschaften:

Beispiel (Ereignisüberwachung direkt mit JavaScript programmieren):

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie:

Beispiel:

Erläuterung:

Beachten Sie: