SELFHTML: JavaScript / Objektreferenz / event
Description: (SELFHTML 7.0) Das JavaScript-Objekt event
Keywords: SELFHTML, JavaScript, Objekt, event-Objekt, Events

SELFHTML/Quickbar JavaScript Objektreferenz

| ## 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, daß 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 daß es zu Fehlermeldungen kommt.

### Beispiel (Ereignisüberwachung direkt mit JavaScript programmieren):

    <html><head><title>Test</title>

    <script language="JavaScript1.2">

    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">
     { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " gedrueckt"; return true; }
    </script>
    <script for=document event="onkeyup()" language="JScript">
     { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " losgelassen"; return true; }
    </script>

### 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, daß ä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 sogenannte Handler-Funktion für den Fall, daß der Anwender eine Taste drückt. Die Funktion `TasteLosgelassen(Ereignis)` behandelt den Fall, daß der Anwender die gedrückte Taste wieder loßläßt. 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, muß 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, daß 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.

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

    <html><head><title>Test</title>
    <script for=document event="onkeypress()" language="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:

    <html><head><title>Test</title>
    <script for=document event="onmousedown()" language="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:

    <html><head><title>Test</title>
    <script for=document event="onmousedown()" language="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:

    <html><head><title>Test</title>
    <script language="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.

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

    <html><head><title>Test</title>
    <script language="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.

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

    <html><head><title>Test</title>
    <script language="JScript">
    function Coords()
     {
      alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY);
     }
    </script>
    </head><body>
    <form>
    <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:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function LayerPos(Ereignis)
    {
     document.layers[0].left = Ereignis.pageX;
     document.layers[0].top = Ereignis.pageY;
    }
    document.onmouseup = LayerPos;
    </script>
    </head><body>
    <layer top=50 left=50 width=100 height=100 bgcolor=#FFE0FF></layer>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Layer. Wenn der Anwender mit der Maus in das Fenster klickt und die Maustaste dann wieder losläßt, wird der Layer an die Position verschoben, an der die Maus losgelassen wurde.

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

    <html><head><title>Test</title>
    <script language="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.

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

    <html><head><title>Test</title>
    <script language="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.

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

    <html><head><title>Test</title>
    <script language="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.

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

    <html><head><title>Test</title>
    <script language="JScript">
    function Coords()
     {
      alert("x = " + window.event.x + "/ y = " + window.event.y);
     }
    </script>
    </head><body>
    <div style="position:absolute; left:10px; top:140px;
    background-color:#FFFFE0">
    <p onClick="RelPos()">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. Beim Testen taten sie das jedoch nicht, sondern bezogen sich auf das Anzeigefenster.

weiter: | history
zurück: | links

SELFHTML/Quickbar JavaScript Objekt-Referenz

© 1998 Stefan Münz, muenz@csi.com