## event

event: Allgemeines zur Verwendung

### Eigenschaften:

altKey, ctrlKey, shiftKey (Sondertasten/Microsoft)
clientX, clientY (Bildschirmkoordinaten/Microsoft)
keyCode (Tastaturcode/Microsoft)
layerX, layerY (objekt-relative Koordinaten/Netscape)
modifiers (Sondertasten/Netscape)
offsetX, offsetY (objekt-relative Koordinaten/Microsoft)
pageX, pageY (fenster-relative Koordinaten/Netscape)
screenX, screenY (Bildschirmkoordinaten/Netscape)
which (Tastatur-/Maustastencode/Netscape)
type (Art des Ereignisses/Netscape)
x,y (Elternelement-relative Koordinaten/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.

Sowohl Netscape 4.x als auch der MS Internet Explorer 4.x kennen das event-Objekt. Leider ist die Implementierung jedoch völlig unterschiedlich gelöst und führt zu einer ziemlich chaotischen Situation in diesem Bereich. Die Eigenschaften des Event-Objekts, die auf dieser Seite beschrieben werden, berücksichtigen beide Browser. In der Regel ist eine Eigenschaft jedoch entweder nur bei Netscape oder nur beim MS Internet Explorer verfügbar. Auch in der Syntax zur Überwachung von Ereignissen unterscheiden sich beide Browser. 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. Hier 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 beide 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 language="JavaScript1.2" type="text/javascript">
    <!--

    var Netscape = new Boolean();
    if(navigator.appName == "Netscape")  Netscape = true;

    function TasteGedrueckt(Ereignis)
    {
     if(Netscape)
      { window.status = "Taste mit Dezimalwert " + Ereignis.which + " gedrueckt"; return true; }
    }
    function TasteLosgelassen(Ereignis)
    {
     if(Netscape)
      { window.status = "Taste mit Dezimalwert " + Ereignis.which + " losgelassen"; return true; }
    }
    document.onkeydown = TasteGedrueckt;
    document.onkeyup = TasteLosgelassen;
    //-->
    </script>

    <!-- JScript-Bereiche fuer MS Internet Explorer -->
    <script for="document" event="onkeydown()" language="JScript" type="text/jscript">
    <!--
     { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " gedrueckt"; return true; }
    //-->
    </script>
    <script for="document" event="onkeyup()" language="JScript" type="text/jscript">
    <!--
     { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " losgelassen"; return true; }
    //-->
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel überwacht Tastaturereignisse auf Dokumentebene. Das heißt, wenn der Anwender in den Anzeigebereich der angezeigten HTML-Datei klickt (Dokument erhält den Fokus) und dann irgendeine Taste drückt, 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.

Um so etwas für Netscape 4.x und MS Internet Explorer 4.x zu realisieren, werden im Beispiel ein JavaScript-Bereich und zwei spezielle JScript-Bereiche definiert. Die JScript-Bereiche werden nur vom MS Internet Explorer ausgelesen, da Netscape Scripts, die mit `language="JScript"` ausgezeichnet sind, ignoriert. Der JavaScript-Bereich ist mit `language="JavaScript1.2"` ausgezeichnet. So wird verhindert, dass ältere Browser (z.B. Netscape 3) diesen Bereich interpretieren. Der Bereich wird jedoch von Netscape 4 und vom MS Internet Explorer 4 interpretiert. Gedacht ist er jedoch nur für Netscape 4. Deshalb werden alle Anweisungen innerhalb des Bereichs von der Abfrage abhängig gemacht, ob Netscape am Werk ist.

Es werden zwei Funktionen definiert: die Funktion `TasteGedrueckt(Ereignis)` ist die so genannte Handler-Funktion für den Fall, dass der Anwender eine Taste drückt. Die Funktion `TasteLosgelassen(Ereignis)` behandelt den Fall, dass der Anwender die gedrückte Taste wieder loßlässt. Beide Funktionen erwarten einen Parameter namens `Ereignis`. Über diesen Parameter können die Funktionen auf Eigenschaften des event-Objekts zugreifen. In den beiden Funktionen im Beispiel wird die Objekteigenschaft `which` ausgewertet, die nach Netscape-Syntax den dezimalen Tastaturcode einer gedrückten Taste speichert.

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`) überwacht. Hinter dem Istgleichzeichen folgt der Name der Handlerfunktion, 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`) überwacht, und zur Ereignisbehandlung wird die Handler-Funktion `TasteLosgelassen` angegeben. Nach dem gleichen Schema können Sie auch andere Ereignisse überwachen - die Handlerfunktionen definieren Sie selber, und anstelle von `onkeydown` und `onkeyup` können Sie alle anderen üblichen Event-Handler notieren.

Bei den beiden Scriptbereichen für den MS Internet Explorer wird für jedes zu überwachende Ereignis ein Scriptbereich notiert. Mit einer Angabe wie `for="document" event="onkeydown()"` im einleitenden `<script>`-Tag geben Sie an, welches Ereignis Sie überwachen wollen (z.B. `onkeydown`), und für welches Objekt (z.B. `document`). Es sind alle üblichen Event-Handler erlaubt.

Innerhalb des Scripts können Sie dann auf Eigenschaften des event-Objekts zugreifen, die der MS Internet Explorer kennt. Mit `window.event.keyCode` wird beispielsweise der dezimale Tastaturcode einer gedrückten Taste ermittelt.

### Beachten Sie:

Das vorliegende Beispiel wird auch vom Netscape 6 entsprechend des netscapespezifischen Syntax interpretiert.

## altKey, ctrlKey, shiftKey

Microsoft-Syntax. Speichert, ob Zusatztasten wie die ALT-Taste oder die Shift-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script for="document" event="onkeypress()" language="JScript" type="text/jscript">
    <!--
     {
      if(window.event.shiftKey)
       alert("eine Taste plus Umschalttaste gedrueckt!");
     }
    //-->
    </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 Umschalttaste gedrückt wurde. In diesem Fall wird eine entsprechende Meldung ausgegeben.

## clientX, clientY

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 for="document" event="onmousedown()" language="JScript" type="text/jscript">
    <!--
     {
      document.all.Springer.style.left = window.event.clientX;
      document.all.Springer.style.top = window.event.clientY;
     }
    //-->
    </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 Style-Sheet-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.

## keyCode

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 for="document" event="onmousedown()" language="JScript" type="text/jscript">
    <!--
     {
      alert(window.event.keyCode);
     }
    //-->
    </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.

## 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 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.

## modifiers

Netscape-Syntax. Speichert, ob Zusatztasten wie die ALT-Taste oder die Shift-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 Dockument 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 Ctrl-Taste (Strg-Taste) abzufragen
`Ereignis.modifiers & Event.SHIFT_MASK`, um die Umschalt-Taste (Großschreibung) 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 interpretiert dieses Beispiel nicht.

## offsetX, offsetY

Microsoft-Syntax. Speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY) 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 language="JScript" type="text/jscript">
    <!--
    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.

## pageX, pageY

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 LayerPos(Ereignis)
    {
     if (document.layers) {
               document.layers[0].left = Ereignis.pageX;
               document.layers[0].top = Ereignis.pageY;
                            }
     else if (window.netscape) {
          document.getElementsByTagName("div")[0].style.left = Ereignis.pageX;
          document.getElementsByTagName("div")[0].style.top = Ereignis.pageY;
     }
    }
    document.onmouseup = LayerPos;
    //-->
    </script>
    </head><body>
    <div style="position:absolute;top:50px;left:50px;width:100px;height:100px;
             background-color:#FFE0FF;border:solid 1px #000000;">
    Ein Layer<br><br>
    </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 Netscape 6 interpretiert werden, wurde das Beispiel echtsprechend kompatibel gestaltet.
Statt eines Layers (Netscape 6 kennt keine Layer mehr) 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 `layer` 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 das Objekt `window.netscape` kennt. Da dieses Objekt nur einem netscape-basierten Browser bekannt ist, werden der MS Internet Explorer und Opera ausgeschlossen. 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

Netscape-Syntax. Speichert die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) 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 Position(Ereignis)
    {
     alert("x-Wert: " + Ereignis.screenX + " / y-Wert: " + Ereignis.screenY);
    }
    document.onmousedown = Position;
    //-->
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel überwacht, ob der Anwender die Maustaste drückt. Wenn ja, werden in einem Meldungsfester die absoluten Bildschirmkoordinaten ausgegeben, an denen die Maustaste gedrückt wurde.

### Beachten Sie:

Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

## which

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 Meldungsfester 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:

Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

## type

Netscape-Syntax. 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)
    {
     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 Meldungsfester aus, welches der Ereignisse eingetreten ist.

### Beachten Sie:

Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

## x, y

Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Cursorposition relativ zur oberen linken Ecke des Eltern-Elements von dem Element, das ein Ereignis ausgelöst hat. Wenn ein absolut positionierter Bereich das Eltern-Element ist, ist dessen obere linke Ecke der Bezugspunkt. Wenn das auslösende Element sonst kein Eltern-Element hat, gilt die linke obere Ecke des Dokuments als Bezug.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script language="JScript" type="text/jscript">
    <!--
    function Coords()
     {
      alert("x = " + window.event.x + "/ y = " + window.event.y);
     }
    //-->
    </script>
    </head><body>
    <div style="position:relative; left:50px; top:140px;
    background-color:#FFFFE0; width:100px">
    <p onClick="Coords()">Klick mich</p>
    </div>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen absolut positionierten Bereich (`<div>`...`</div>`) und innerhalb davon einen gewöhnlichen Textabsatz. Beim Anklicken des Absatzes wird die Funktion `Coords()` aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks aus. Eigentlich sollten sich die Werte dabei auf die linke obere Ecke des `<div>`-Bereichs beziehen.

### Beachten Sie:

Versionen des MS Internet Explorer vor der Version 5 speichern in diesen Eigenschaften die Position relativ zum Fenster. Ab dem MS 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.

| history
| links

© 2001 selfhtml@teamone.de