info@a-coding-project.de

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 über window.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 das window.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)
Eine browserübergreifende Event-Behandlung könnte z.B. so aussehen:

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.

Über uns

Stefan Wienströer

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

Auch interessant