SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
 |
event |
|
Eigenschaften:
|
 | |
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.
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> |
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.
Das vorliegende Beispiel wird auch vom Netscape 6 entsprechend des netscapespezifischen Syntax interpretiert.
 |
altKey, ctrlKey, shiftKeyMicrosoft-Syntax. Speichert, ob Zusatztasten wie die ALT-Taste oder die Shift-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.
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>
|
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, clientYMicrosoft-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.
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>
|
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.
|
|
keyCodeMicrosoft-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert) der gedrückten Taste.
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>
|
Das Beispiel überwacht, ob bei aktivem Dokument eine Taste gedrückt wurde. Wenn ja, wird deren Wert in einem Meldungsfenster ausgegeben.
|
|
layerX, layerYNetscape-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.
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>
|
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.
Netscape 6.1 interpretiert zwar den Event-Handler, jedoch ist in den Eigenschaften layerX und layerY jeweils der Wert 0 gespeichert.
|
|
modifiersNetscape-Syntax. Speichert, ob Zusatztasten wie die ALT-Taste oder die Shift-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.
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>
|
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.
Netscape 6.1 interpretiert dieses Beispiel nicht.
|
|
offsetX, offsetYMicrosoft-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.
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>
|
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, pageYNetscape-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.
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>
|
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, screenYNetscape-Syntax. Speichert die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) der Cursorposition absolut gesehen zum Bildschirm, wenn z.B. Mausereignisse überwacht werden.
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>
|
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.
Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.
|
|
whichNetscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert) der gedrückten Taste und bei Mausereignissen, welche Maustaste gedrückt wurde.
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>
|
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.
Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.
|
|
typeNetscape-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.
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>
|
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.
Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.
|
|
x, ySpeichert 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.
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>
|
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.
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
|
| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
© 2001 
selfhtml@teamone.de