HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 

JavaScript: Event

von Jan Winkler

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

Anzeige

JavaScript 1.2 Verwendung  nach oben

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  nach oben

JavaScript 1.2 data

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

JavaScript 1.2 height

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

JavaScript 1.2 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>

JavaScript 1.2 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:

WertBedeutung
0Keine Sondertaste wurde verwendet
1Die Alt-Taste wurde gedrückt.
2Die Strg-Taste (auch Ctrl) wurde gedrückt.
3Die AltGr-Taste wurde gedrückt (= Alt+Strg).
4Die 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);
}

JavaScript 1.2 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.

JavaScript 1.2 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.

JavaScript 1.2 DOM 2 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; } }
}

JavaScript 1.2 DOM 2 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 */ }
}

JavaScript 1.2 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!');
}

JavaScript 1.2 width

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

JavaScript 1.2 x & y

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


 

JavaScript

.Autor:Jan Winkler.
. Bewertung:
JavaScript: Event HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 754 Beiträge im JavaScript Forum .

Navigation

Doku-Inhalt

html-Datei in Container nachladen von Piwi
blättern navigation - nicht alle seitenzahlen zeigen von Powell
XML-Datei per Javascript ver- und entschlüsseln?! von Nupsi
getElementById/innerHTML von duff_beer
Brauche dringend Hilfe/Gallery2.3 von Harburger1887
Window Open von javahack
Musik nach bestimmter Zeit abspielen von InsaYn
Merlin erscheint nicht auf der Website von Moijto
Bräuchte Hilfe von jemanden der sich auskennt ;-) von ladehf
Re: php Style über javascript laden nur wie? von TBT
Bannerwechsel mit mehreren Bannern und per Klick von katha126
HTML Referer ändern von nhs
JavaScript Weiterleitung von xmen
Zeitgesteuertes und zufälliges laden verschiedener index.php von Brainflame
Dynamisch erstellten (mit PHP) Checkboxen mit jQuery/AJAX au von Kyfe

zum JavaScript Forum »


 
     
 

Anzeige