JavaScript: Event

von Jan Winkler

Das clientseitige JavaScript Event-Objekt enthält Eigenschaften, die das ausgelöste Ereignis beschreiben.

Verwendung  

Wie im Kapitel Ereignisse bereits beschrieben, übergibt JavaScript nach dem Auslösen eines Ereignisses ein Event-Objekt an die zu behandelnde Funktion. Das Objekt kann nicht selbständig erstellt werden sondern wird vom JavaScript Interpreter erzeugt, sobald ein Ereignis ausgelöst wurde. Beispiel:

window.onload = reagiere;

function reagiere(a)
{
// a ist Event-Objekt und kann verwendet werden
}

Grundsätzlich kann jeder Variablenname verwendet werden. Außerdem ist auch die Verwendung der Variablen event möglich, wenn diese innerhalb des Event-Handlers notiert wird. Beispiel:

<a href="http://www.html-world.de"
   onClick="alert('Folgendes Event wurde aufgerufen: '+ 
            event.type)"> Klicke hier! </a>

Jede Eigenschaft kann geschrieben werden, hierfür wird das Privileg BrowserWrite benötigt.

Eigenschaften  

data

Die data-Eigenschaft gibt ein Array aus Strings aus, die die URL's der verwendeten Objekte wiedergeben.
Notation: Objekt.data
Kein Beispiel.

height

Die height-Eigenschaft gibt die Höhe des Fensters aus, in dem das Ereignis ausgelöst wurde.
Notation: Objekt.height
Kein Beispiel.

layerX & layerY

Die layerX-Eigenschaft beschreibt die Breite des Objekts auf dem das Ereignis ausgelöst wurde, sofern es sich dabei um ein Resize-Ereignis handelt. Ansonsten beschreibt sie die X-Koordinate des Ereignisses (z.B. der Maus) relativ zum Layer (bzw. wenn kein Layer existiert zum Fenster). Die layerY-Eigenschafte beschreibt die Höhe bzw. die Y-Koordinate des Ereignisses.
Notation: Objekt.layerX
Notation: Objekt.layerY

<layer name="lay1" bgcolor="#FF0000" width="100" height="100">
</layer>
<script language="JavaScript">
<!--
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = schiebe;
function schiebe(e)
{
 document.layers.lay1.left = e.layerX;
 document.layers.lay1.top = e.layerY;
}
//-->
</script>

modifiers

Die modifiers-Eigenschaft gibt die Maustasten oder Sondertasten aus, die während des Ereignisses verwendet wurden oder dieses auslösten. Als Rückgabewert wird eine Zahl zurückgegeben, die sich aus der Addition der Tastencodes zusammensetzt. Folgende Tastencodes gibt es:

Wert	Bedeutung
0	Keine Sondertaste wurde verwendet
1	Die Alt-Taste wurde gedrückt.
2	Die Strg-Taste (auch Ctrl) wurde gedrückt.
3	Die AltGr-Taste wurde gedrückt (= Alt+Strg).
4	Die Umschalt-Taste wurde gedrückt.

Da es grundsätzlich Probleme mit diesen Werten gibt, wenn z.B. zwei Tasten gleichzeitig gedrückt werden, wird geraten die Tasteneigenschaften des Event-Objekts hinzu zu ziehen. Dies sind:

• Event.ALT_MASK - Alt-Taste
• Event.CONTROL_MASK - Strg-Taste
• Event.SHIFT_MASK - Umschalt-Taste
• Event.META_MASK - AltGr-Taste

Werden diese durch ein Bitweises UND (&) mit dem Wert verbunden, wird entweder 0 oder der Tastencode zurückgegeben - je nachdem, ob die Taste im Wert enthalten ist (0) oder nicht (Code). Da der Tastencode immer über 0 liegt, sollte dies für eine Abfrage reichen (0 = false).
Notation: Objekt.modifiers

window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = taste;
function taste(e)
{
 s = 'Es wurden folgende Tasten gedrückt: '
 if(e.modifiers == 0){s += 'keine'}
 if(e.modifiers & Event.ALT_MASK){s += 'ALT '}
 if(e.modifiers & Event.CONTROL_MASK){s += 'STRG '}
 if(e.modifiers & Event.META_MASK){s += 'ALTGR '}
 if(e.modifiers & Event.SHIFT_MASK){s += 'UMSCHALT '}
 alert(s);
}

pageX & pageY

Die pageX-Eigenschaft beschreibt die X-Koordinate des Ereignisses relativ zum Seitenanfang. Die pageY-Eigenschaft beschreibt die entsprechende Y-Koordinate.
Notation: Objekt.pageX
Notation: Objekt.pageY
Beispiel siehe layerX-Eigenschaft.

screenX & screenY

Die screenX-Eigenschaft beschreibt die X-Koordinate des Ereignisses relativ zum Bildschirmrand. Die screenY-Eigenschaft beschreibt die entsprechende Y-Koordinate.
Notation: Objekt.screenX
Notation: Objekt.screenY
Kein Beispiel.

target

Die target-Eigenschaft gibt das Objekt wieder von dem das Ereignis ursprünglich ausgelöst wurde.
Notation: Objekt.target

window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = mach;
function mach(e)
{
 //ein bild:
 if(e.target.src){res = e.target.src;}
 //ein link:
 else if(e.target.href){res = e.target.href;}
 //etwas anderes:
 else {res = ''};

 if(res != '')
 { if(confirm('Zu "'+res+'" gehen?')){ location.href = res; } }
}

type

Die type-Eigenschaft gibt einen String wieder, der den Typ des Ereignisses enthält.
Notation: Objekt.type

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | EVENT.MOUSEUP);
window.onmousedown = machwas;
window.onmousemove = machwas;
window.onmouseup = machwas;
function machwas(e)
{
 if(e.type == 'mousedown'){ /* behandeln */ }
 else if(e.type == 'mouseup'){ /* behandeln */ }
 else if(e.type == 'mousemove'){ /* behandeln */ }
}

which

Die which-Eigenschaft gibt entweder, bei einem Tastaturereignis, die Zahl des ASCII-Zeichens der Taste oder, bei einem Mausereignis, die Maustaste aus. Der Maus-Wert 1 entspricht der linken Maustaste, 2 der mittleren und 3 der rechten Maustaste.
Notation: Objekt.which

window.captureEvents(Event.KEYPRESS)
window.onkeypress = taste;
function taste(e)
{
 if(e.which == 13)
 {alert('Warum haben Sie die Enter-Taste gedrückt?')};
}

window.captureEvents(Event.MOUSEDOWN)
window.onmousedown = maus;
function maus(e)
{
 switch(e.which)
 {
  case 1:t='linke'; break;
  case 2:t='mittlere'; break;
  case 3:t='rechte'; break;
 }
 alert('Sie haben die '+t+' Maustaste gedrückt!');
}

width

Die width-Eigenschaft gibt die Breite des Fensters aus, in dem das Ereignis ausgelöst wurde.
Notation: Objekt.width
Kein Beispiel.

x & y

Die x- und y-Eigenschaften sind Synonyme der layerX- bzw. layerY-Eigenschaften.
Notation: Objekt.x
Notation: Objekt.y
Beispiel siehe layerX-Eigenschaft.