JavaScript: Event

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="https://www.a-coding-project.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:

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.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project