DHTML: Events
Events, oder zu deutsch Ereignisse, sind ein weiterer wichtiger Bestandteil von DHTML. Sie ermöglichen es dem Programmierer auf eine bestimmte Situation oder ein bestimmtes Verhalten des Benutzers zu reagieren. Leider muss auch hierbei zwischen den einzelnen Browsern unterschieden werden. Der Netscape Navigator übergibt beim Aufruf eines Events z.B. das dazugehörige Event-Objekt - bei Microsofts Browser muss dieses überwindow.event abgefragt werden. Aber mal der Reihe nach: Events definieren
Wie schon erwähnt ist das Verhalten der Browser auch bei Events sehr unterschiedlich. Um ein Event zu definieren sollte daher auch hierbei auf die einzelnen Browser eingegangen werden. Grundsätzlich gilt: Werden die Events innerhalb von HTML definiert sind die Browser gleich (z.B.<body onload="machwas()"> ...). Erst bei Ereignissen, die innerhalb von JavaScript beschrieben werden, gibt es kleine Unterschiede.Im Netscape Navigator sollte das 'Fangen' eines bestimmten Ereignisses erst aktiviert werden. Dies geschieht durch
document.captureEvents(x), wobei x durch die Event-Bezeichnung ersetzt wird (also z.B. document.captureEvents(Event.MOUSEDOWN);). Ist dies getan, kann das Event wie bei den anderen Browsern auch definiert werden (z.B. document.onmousedown = machwas;).
Auf Events reagieren
Ist ein Event erstmal ausgelöst geht es an die Behandlung. Netscapes und Operas Browser übergeben hierzu, wie erwähnt, standardmäßig ein Event-Objekt an die Aufgerufene Funktion das die Eigenschaften des Events enthält. Beim Internet Explorer müssen diese Eigenschaften erst über daswindow.event-Objekt abgefragt werden. Allerdings ist dies noch nicht alles. Aufgrund der verschiedenen Objekte haben leider auch die Eigenschaften andere Namen, sodass man hier eine Unterscheidung vornehmen sollte. Einige wichtige Eigenschaften eines Ereignisses:
| Microsoft | Netscape | Opera | Beschreibung |
|---|---|---|---|
.type | .type | .type | Typ des Events |
.srcElement | .target | .target oder .srcElement | String der das Element enthält an das das Ereignis gesendet wurde. |
.x | .x | .x | X-Koordinate des Events |
.y | .y | .y | Y-Koordinate des Events |
.clientX | .pageX | .clientX | X-Koordinate des Corsors relativ zum Fenster |
.clientY | .pageY | .clientY | Y-Koordinate des Corsors relativ zum Fenster |
.screenX | .screenX | .screenX | X-Koordinate des Corsors relativ zum Bildschirm |
.screenY | .screenY | .screenY | Y-Koordinate des Corsors relativ zum Bildschirm |
.keyCode | .which | .which oder .keyCode | String der den ASCII-Wert der gedrückten Taste wiedergibt. |
.ctrlKey | (x.modifiers == 2) | .ctrlKey | Boolescher Wert ob die Strg-Taste gedrückt wurde (x durch das Event-Objekt ersetzen) |
.altKey | (x.modifiers == 1) | .altKey | Boolescher Wert ob die Alt-Taste gedrückt wurde (x durch das Event-Objekt ersetzen) |
.shiftKey | (x.modifiers == 4) | .shiftKey | Boolescher Wert ob die Strg-Taste gedrückt wurde (x durch das Event-Objekt ersetzen) |
function Reagiere(e)
{
//e für Internet Explorer zurecht biegen
if(typeof(window.event) == 'object')
{
e.type = window.event.type;
e.target = window.event.srcElement;
e.x = window.event.x;
e.y = window.event.y;
e.pageX = window.event.clientX;
e.pageY = window.event.clientY;
// usw.
}
//e für Opera ab 5.x zurecht biegen
if(typeof(window.opera))
{
e.target = e.srcElement;
e.pageX = e.clientX;
e.pageY = e.clientY;
// usw.
}
//eigentliche Behandlung des Ereignisses
if(e.pageX >= 100 && e.pageY >= 100){machwas(e.x,e.y);}
// usw.
}
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