Woche 3

Tag 17

Globale Ereignisbehandlung

Nachdem der gestrige Tag ziemlich anstrengend und umfangreich war, wird der heutige Tag ein kleines, aber feines Thema untersuchen. Der Tag 17 soll abermalig im Zeichen der Ereignisbehandlung unter JavaScript stehen. Bisher haben wir JavaScripte nur über das Laden einer Webseite oder die Reaktion auf Ereignisse über Event-Handler ausgelöst. An verschiedenen Stellen wurde jedoch schon darauf hingewiesen, dass es auch anders geht. Es gibt im Konzept der Ereignisbehandlung ein spezielles Objekt, das dafür eigens bereitsteht. Wir müssen also das Objektkonzept mit dem Ereigniskonzept zusammenbringen.

Wenn man das tut, hat das einige weitreichende Konsequenzen. Die Ereignisüberwachung wird beispielsweise direkt in JavaScript programmiert. Die Verbindung von HTML (über die dort zugehörenden Event-Handler) und JavaScript in einer Zweckehe wird aufgelöst. Statt dessen wird von speziellen JavaScript-Routinen das Auftreten eines Ereignisobjekts überwacht. Je nach Art des Ereignisses kann der JavaScript-Interpreter darauf reagieren.

Das event-Objekt in JavaScript

Wenn in einer Webseite ein Ereignis auftritt, wird dabei seit JavaScript 1.1 ein eigenes Objekt generiert - das event-Objekt, welches ein Unterobjekt von window ist. Das event-Objekt beinhaltet verschiedenste Informationen über ein aufgetretenes Ereignis in einer Webseite samt der Randbedingungen, welche dabei eine Rolle gespielt haben.

Sie müssen sich vergegenwärtigen, dass solche event-Objekte während der Anzeige einer Webseite im Browser permanent im Hintergrund erzeugt werden. Unabhängig davon, ob Sie diese in Ihrem Script zur Kenntnis nehmen oder nicht. Sie sind einfach da.

Das wollen wir erst einmal mit einem Fitnessvideo vergleichen, wo ein Vorturner bestimmte Übungen demonstriert. Wenn das Ereignis »Liegestütze machen« auftritt, werden Sie es sehen, falls Sie gerade auf den Bildschirm schauen. Ob Sie darauf reagieren oder nicht, das ist Ihre Sache und beeinflusst den Ablauf des Videos nicht. Es kümmert den Vorturner nicht weiter - er hat keine Ahnung davon, ob und wie Sie darauf reagieren. (Wie sollte er auch - das Video ist ja schon lange vor der Sendung gedreht worden.) Er wird sein Programm runterspielen und immer neue Ereignisse abfeuern¹.

Wechseln wir wieder zu JavaScript. In einer Webseite ist eine Situation, welche ein solches event-Objekt erzeugt, beispielsweise der Klick mit der Maus auf irgendeinen Bestandteil der Webseite. Ein Mausklick erzeugt ein event-Objekt, welches folgende Informationen enthält:

• Die verwendete Taste,
• eventuell gedrückte Zusatztasten (Strg), (Alt), (Alt-Gr), (ª) und
• die Koordinaten, wo der Klick erfolgte.

Andere event-Objekte, die bei anderen Ereignissen erzeugt werden, beinhalten natürlich andere Informationen, welche dem Ereignis angepasst sind. So könnte etwa bei einem Tastendruck die gedrückte Taste als abzufragende Information bereitstehen.

Das Entstehen eines Ereignisses wird in der englischsprachigen Literatur bei vielen Ereigniskonzepten als »to fire an event« beschrieben - abfeuern. Den Knall nimmt jedermann zur Kenntnis, aber inwieweit und wie sich wer darum kümmert, ist nicht festgelegt.

Nun ist es sicher nicht Sinn und Zweck eines Ereignismodells, dass permanent Ereignisse abgefeuert und diese nie beachtet werden (sprich darauf reagiert wird). Bei bestimmten Situationen will man ja explizit eine Reaktion haben, d.h. es soll ein Script aufgerufen werden.

Überarbeiten wir unseren Vergleich mit dem Fitnessvideo ein wenig. Es sei nun kein Video mehr, sondern ein Kurs in einem Fitnessstudio. Der »Fitness-Instructor« wird sehr wohl eine Rückmeldung durch die Teilnehmer zur Kenntnis nehmen können. Wenn es dem Menschen nun ziemlich egal ist, ob alle Teilnehmer mitmachen oder nicht und er nur dann reagiert, wenn Teilnehmer sich durch eine Botschaft bemerkbar machen², sind wir der Idee eines Ereignismodells schon recht nahe.

Ein event-Objekt wird, wenn man unter JavaScript darauf reagieren will, an einen Mechanismus zum Behandeln von event-Objekten in Form einer Message (Botschaft) weitergereicht.

Auf welche Art und Weise auf welches erzeugte Ereignisobjekt dann reagiert werden soll, wird durch ein abstraktes Modell geregelt - dem Ereignismodell. Darin sind sowohl die Verhaltensweisen auf Ereignisse festgelegt, die konkrete Syntax zur Umsetzung, aber auch erst recht diejenigen Ereignisse, welche überhaupt zu Kenntnis genommen werden³.

Um gleich die größte Problematik anzuschneiden: Können Sie sich vorstellen, dass man sich bei Microsoft und Netscape auf ein gemeinsames, kompatibles Konzept geeinigt hat? Ja? Und wo haben Sie den Osterhasen genau gesehen? Selbstverständlich⁴ sind die Konzepte nicht vollkommen kompatibel. Im Prinzip ist bei beiden Varianten vom Konzept her fast alles gleich, aber von der Syntax so gemacht, dass auf keinen Fall der jeweilig gegnerische Browser damit klarkommt.

Prinzipiell unterscheidet man im Ereignismodell von Netscape zwischen fünf verschiedenen Kategorien von Ereignissen, die im Laufe des Lebens einer Webseite auftreten können:

• Dokumentenereignisse. Darunter versteht man die Ereignisse, welche beim Laden und Entfernen einer Seite aus dem Browser entstehen. Dies entspricht den Ereignissen, die mit den Event-Handlern onLoad und onUnload abgefragt werden (wenn man über Event-Handler arbeitet).
• Formular-basierende Ereignisse. Diese Ereignisse werden erzeugt, wenn ein Anwender mit der Seite über ein Formular interagiert, d.h. den Fokus in einer Formularmaske verschiebt, eine Auswahl ändert oder ein Formular abschickt. Das entspricht den vier Event-Handlern onFocus zum Fokussieren und onBlur zum Fokus an ein anderes Element weiterreichen bzw. onSelect und onSubmit.
• Referenz-basierende Ereignisse. Sie werden im Netscape-Modell ausgelöst, wenn der Anwender auf einen Hyperlink in einer Webseite klickt oder den Mauszeiger darüber bewegt. Das entspricht den Event- Handlern onClick und onMouseOver.
• Elementbezogene Ereignisse. Sie geben den Status eines Elements in einer Webseite an.
• Fensterbezogenen Ereignisse. Diese treten auf, wenn mehr als eine Fensterinstanz des Navigator angezeigt wird. Für jede Instanz stehen dann verschiedene Ereignisse zur Verfügung.

Für die konkrete Anwendung ist es nicht von Interesse, zu welcher Kategorie ein Ereignis gehört. Sie müssen es nur korrekt anwenden.

Auswerten eines event-Objekts und die Reaktion

Da Ereignisobjekte während der Lebenszeit einer Webseite permanent im Hintergrund entstehen, stehen sie auch überall im Code zur Verfügung. Es gibt verschiedene Konzepte, auf welche Weise so ein event-Objekt angesprochen werden kann. Sie können es einfach über seinen Namen (event) ansprechen. Dabei müssen Sie noch angeben, von welchem Objekt aus das event-Objekt erzeugt wurde. Die Syntax dazu ist die in der objektorientierten Programmierung übliche Punktnotation:

[Objekt].event

Beispiel (Webseite):

document.event

Sie wollen bei einer Auswertung in der Regel dann natürlich eine ganz bestimmte Information eines Ereignisses verwenden. Dies sind bei einer objektorientierten Betrachtungsweise einfach die Eigenschaften des Objektes. So können Sie etwa einen Mausklick wie folgt ansprechen:

document.event.CLICK

Dies versteht vom Prinzip her sowohl der Internet Explorer als auch der Netscape Navigator. Dummerweise setzen sie aber die konkrete Implementierung völlig unterschiedlich um. Auch in der Syntax zur Überwachung von Ereignissen (wie schon bei der Unterstützung der Event- Handler) unterscheiden sich beide Browser.

Die Auswertung eines event-Objektes wird Auffangen genannt.

Globales Auffangen der Ereignisse

Sowohl das Netscape-Objektmodell als auch das Microsoft-Objektmodell erlauben das globale Auffangen von event-Objekten. Sie können damit an zentraler Stelle in einer Webseite oder gar einem ausgelagerten Script behandelt werden. Dies ist sehr sinnvoll, wenn eine konsequente strukturelle Trennung einer Seite erreicht werden soll. Globales Eventhandling ist damit eine logische Konsequenz der Bemühungen, Layout, Inhalt und Scriptfunktionalitäten in einer Webseite zu entflechten.

Leider sind jedoch - wie mehrfach erwähnt - die von den beiden großen Internet-Protagonisten angewandten Techniken nicht kompatibel⁵. Der Internet Explorer wird beim Laden vom Javascipt-Code, der dem Netscape- Objektmodell entsprechend programmiert wurde, in der Regel eine Fehlermeldung bringen oder es ignorieren. Analog ist die Situation im Navigator beim Laden von JavaScript-Code nach der Microsoft-Variante - Ignoranz oder Fehler.

Das Netscape-Ereignismodell

Unter dem Netscape-Modell können Sie über eine zum window-Objekt gehörende Methode bewirken, dass alle dort als Parameter spezifizierten Ereignisse eines spezifizierten Typs innerhalb eines bestimmten Objektes (etwa einer ganzen Webseite) zentral behandelt werden. Dies ist die Methode captureEvents(), die wie folgt angewandt wird:

[Objekt].captureEvents([Ereignistyp])

Wenn so eine Zeile im JavaScript-Code notiert wird, werden alle spezifizierten Ereignisse, die bei dem vorangestellten Objekt auftreten, aufgefangen und an eine zentrale Stelle weitergeleitet - an die zentrale Ereignisbehandlungsroutine. Dies ist in diesem Fall einfach eine Funktion, welche als Argument das erzeugte event-Objekt mit der gewünschten Eigenschaft verwendet. Als Ereignistyp können die bei einem Objekt von Netscape unterstützen Event-Handler verwendet werden.

Das Ereignismodell von Netscape ist in Zusammenhang mit einem allgemeineren Konzept zu sehen, mit dem Netscape dynamische Webseiten realisiert - dem Layer-Konzept (Schichten), das Netscape mit der Version 4.0 seines Browsers einführte und als Sprachelement von HTML versteht. Mit Hilfe des <LAYER>-Containers ist es möglich, beliebige Bereiche einer HTML-Datei exakt zu kontrollieren und Elemente zu positionieren. Neben der auf HTML beschränkten Funktion von Layern verwendet Netscape diese als Zielobjekt für Manipulationen unter JavaScript. Wir werden diese Technik jedoch nicht weiter verfolgen, da sie ausschließlich auf Netscape-Browser ab dem Navigator 4.0 beschränkt ist und vor allen Dingen vom W3-Konsortium nicht gestützt wird. Wahrscheinlich wird Netscape über kurz oder lang die Technik einstellen müssen.

Das Netscape-Ereignismodell unterstützt die folgenden Events bzw. Event- Handler in den beschriebenen Situationen:

Grundsätzlich wird der Bezeichner eines Event-Handler aus dem Namen des Events selbst gebildet. Es wird einfach on vorangestellt.

Das Verfahren zum Auffangen und Behandeln von Ereignisobjekten beinhaltet im Wesentlichen vier Grundmethoden, die (bis auf eine Ausnahme) beim window-, document- und layer-Objekt spezifiziert sind. Es ist einmal die bereits angesprochene Methode

captureEvents()

sowie

releaseEvents()

womit das Ignorieren eines aufgefangenen Ereignisobjekts vom angegebenen Typ definiert werden kann,

routeEvent()

zum Weiter- bzw. Umleiten eines aufgefangenen Ereignisobjekts zu einem angegebenen Zielobjekt und

handleEvent()

womit das aufgefangene Ereignisobjekt explizit behandelt werden kann (diese Methode ist beim layer-Objekt nicht vorhanden).

Grundsätzliche Vorgehensweise bei dieser Form der Ereignisbehandlung ist folgende:

1. Das Auffangen eines Events wird ermöglicht.
2. Die Definition des Event-Handlers erfolgt.
3. Die Registrierung des Event-Handlers erfolgt.

Um das Auffangen eines Events zu ermöglichen, wird bei dem entsprechenden Objekt (etwa window) eine Anweisung der folgenden Art notiert:

window.captureEvents(Event.CLICK);

Das Argument der Methode captureEvents() ist eine Eigenschaft von dem event-Objekt, die den Typ des Ereignisses spezifiziert. Der Aufbau ist einfach das vollständig groß geschriebene Ereignis, das per Punktnotation Event nachgestellt wird.

Um mehrere Ereignisse aufzufangen, kann als Argument eine Liste von solchen Eigenschaften angegeben werden. Die Eigenschaften werden mit dem Zeichen | separiert. Um beispielsweise die Ereignisse Click, MouseDown und MouseUp aufzufangen, muss Folgendes notiert werden:

window.captureEvents(
Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)

Die Definition der Event-Handler bedeutet, man definiert eine Funktion, die das Ereignis behandelt. Das Argument e ist das Ereignisobjekt für das Ereignis. Beispielsweise so:

function BehandleEreignis(e) 
{
...
}

Sinnvollerweise sollte die Funktion einen boolschen Rückgabewert liefern, damit auf eine erfolgreiche Behandlung oder aber auch einen Fehler bei der Behandlung reagiert werden kann. Ansonsten kann man hier sehr differenzierte Vorgänge angeben, worauf wir aber verzichten wollen.

Das abschließende Registrieren des Event-Handlers läuft so ab:

window.onClick = BehandleEreignis;

Das Ereignis, für das eine bestimmte Funktion als Event-Handler agieren soll, wird dem zugehörigen Objekt nachgestellt notiert. Auf der rechten Seite der Anweisung wird der Bezeichner der Event-Handler-Funktion zugewiesen. Dabei sollte wieder beachtet werden, dass dort keine Klammern auftauchen. Event-Handler sind Funktionsreferenzen. Deshalb dürfen bei der Zuordnung keine (!) Klammern angegeben werden. Ansonsten würde die Funktion unmittelbar bei der Zuordnung ausgeführt und das Ergebnis undefined zugewiesen (siehe dazu auch Tag 11, Beispiel 11).

Beispiel 1:

Erstellen wir einfach einmal einen vollständigen Code, der eine solche zentrale Ereignisbehandlung unter dem Netscape-Objektmodell bewirkt (Name der Datei: Event1.htm).

<HTML>
<SCRIPT language="JavaScript">
document.captureEvents(Event.MOUSEOVER);
function BehandleEreignis(e) 
{
meldung = 
"An der Position " + e.layerX + 
", " + e.layerY + " trat das Ereignis " 
+ e.type + " auf.";
alert(meldung);
return true;
}
document.onMouseOver = BehandleEreignis;
</SCRIPT>
<BODY>
<A href="Event1.htm">
Dies ist ein Hyperlink
</A>
<P>
<A href="Event1.htm">
Dies ist ein zweiter Hyperlink
</A>
</BODY>
</HTML>
 Abbildung 17.1:   Das beim Überstreichen ausgelöste Ereignis

Wenn Sie die Datei in den Navigator laden und den Mauszeiger über einen der beiden Links bewegen, wird ein Mitteilungsfenster aufgehen (dies bewirkt die Methode alert(meldung);), in der die aktuelle Position des Mauszeigers und der Ereignistyp angezeigt werden. In der Zeile

meldung = "An der Position " + e.layerX + ", " + 
e.layerY + " trat das Ereignis " + e.type + " auf.";

werden dazu diverse Eigenschaften des event-Objektes (X- und Y- Koordinaten sowie der Typ des Ereignisses) abgefragt und zu einer Meldung zusammengesetzt. Beachten Sie die veränderten Positionsangaben, wenn der Mauszeiger an einer anderen Stelle das Ereignis auslöst. Wenn Sie sich diese Datei im Internet Explorer anschauen, werden Sie eine Fehlermeldung bekommen.

Abbildung 17.2:  Die Fehlermeldung im IE.

Es kann durchaus mehr als eine Behandlungsfunktion definiert werden, wenn entsprechend in der captureEvents()-Methode zugehörige Ereignisse aufgefangen werden. Das werden wir im nächsten Beispiel machen.

Die Eigenschaft des event-Objekts

Betrachten wir hier der Vollständigkeit halber die spezifischen Eigenschaften des Netscape-Ereignismodells in Zusammenhang mit dem event-Objekt.

• Die Eigenschaft data tritt in Zusammenhang mit dem DragDrop-Event auf und gibt ein Array von Strings zurück, welche die URLs der gezogenen Objekte beinhaltet.
• Die Eigenschaften height und width beinhalten die Höhe und Breite von dem Fenster oder Frame.
• Die Eigenschaften layerX und layerY beinhalten die aktuelle Breite (layerX) und Höhe (layerY) eines Objekts, wenn das Ereignis onresize überwacht wird, oder die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) der Cursorposition relativ zur oberen linken Ecke eines Layer-Bereichs, wenn z.B. Mausereignisse überwacht werden. Synonym dafür stehen die Eigenschaften X und Y.
• Zur Abfrage der Zusatztasten gibt es die Eigenschaft modifiers. Darin wird gespeichert, ob Zusatztasten wie (ALT), (ALTGR), (CRTL) oder (ª) gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden. Dabei werden folgende Variablen des event-Objektes verwendet:
  Event.ALT_MASK wird bei der (ALT)-Taste ausgelöst
  Event.CONTROL_MASK wird bei der (CRTL) -Taste ausgelöst
  Event.SHIFT_MASK wird bei der (ª) -Taste ausgelöst
  Event.META_MASK wird bei der (ALTGR)-Taste ausgelöst
• Zur Auswertung der Cursorkoordinaten stellt Netscape zwei Varianten zur Verfügung:
• 1. eine relative Auswertungsmöglichkeit
• 2. eine absolute Auswertungsmöglichkeit

Über die Eigenschaften pageX und pageY kann auf die horizontalen Pixel (pageY) und die vertikalen Pixel (pageY) der Cursorposition relativ zur oberen linken Ecke der Seite zugegriffen werden.

Die Eigenschaften screenX und screenY enthalten die horizontalen Pixel (screenX) und die vertikalen Pixel (screenY) der Cursorposition absolut gesehen zum Bildschirm.

• Die Eigenschaft target ist eine Stringrepräsentation des Objekts, um dem ein Ereignisobjekt ursprünglich gesendet wurde (eine sinnvolle Information, wenn ein Ereignisobjekt umgeleitet wurde, was man mit der Methode routeEvent() ja machen kann).
• In der Eigenschaft which steckt nach Tastaturereignissen der dezimale Code (ASCII-/ANSI-Wert) der gedrückten Taste und bei Mausereignissen die Information, welche Maustaste gedrückt wurde.
• In der Eigenschaft type wird dokumentiert, welches Ereignis eingetreten ist. Der gespeicherte Wert ist der Name des Ereignisses ohne das vorangestellte on.

Beispiel 2:

Erstellen wir noch ein weiteres Beispiel, das diesmal mit Frames arbeitet und das Ereignis Click sowie MouseOut überwacht. In dem einen Frame befindet sich eine Datei mit einem Link, der überwacht wird. Die Ausgabe der interessanten Informationen erfolgt bei einem Klick darauf im zweiten Frame (Name der Datei: Event2.htm). Wenn Sie den Bereich des Links wieder verlassen, wird eine Mitteilung erscheinen, da auch MouseOut überwacht wird.

Sie benötigen als Erstes einen Frameset, der FS.htm heißen soll:

<HTML>
<FRAMESET cols="25%,75%">
<FRAME src= "Event2.htm" name="links" >
<FRAME src= "blank.htm" name="rechts" >
</FRAMESET>
<NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</HTML>

Es wird im rechten Frame eine leere Datei benötigt. Das kann einfach eine Datei ohne irgendwelchen Inhalt sein, die nur unter dem Namen Blank.htm gespeichert sein muss. Erstellen Sie nun die Datei Event2.htm:

<HTML>
<SCRIPT language="JavaScript">
window.captureEvents(Event.CLICK | Event.MOUSEOUT);
function BehandleEreignis1(e) 
{
meldung = "Hoehe: " + e.height + 
  " Breite: " + e.width + 
  " Modifiers: " + e.modifiers + 
  " pageX: " + e.pageX + 
  " pageY: " + e.pageY + 
  " which: " + e.which + 
  " screenX " + e.screenX + 
  " screenY " + e.screenY + " !<BR>   ";
top.frames[1].document.write(meldung);
return true;
}
function BehandleEreignis2(e) {
  alert("Und raus");
  return true;
}
window.onClick = BehandleEreignis1;
window.onMouseOut = BehandleEreignis2;
</SCRIPT>
<BODY>
<A href="Event2.htm">
Dies ist ein Hyperlink
</A>
</BODY>
</HTML>

Sie finden in dem Beispiel zwei Überwachungsfunktionen und zwei angemeldete Ereignisse. Testen Sie den Link, indem Sie darauf klicken (es kann sein, dass die Reak-tion etwas dauert, da die Ereignisbehandlung nicht allzu flott und etwas ungenau erfolgt - klicken Sie bei Bedarf mehrmals). Im rechten Frame sollten Werte von diversen Eigenschaften der Ereignisobjekts angezeigt werden. Beachten Sie die Zeile

top.frames[1].document.write(meldung);

Damit können Sie via dem Frame-Objektfeld direkt in der dort geladenen Datei schreiben.

Wenn Sie den Bereich des Links mit dem Mauszeiger verlassen, erscheint das Mitteilungsfenster.

Abbildung 17.3:  Die Reaktion auf beide Ereignisse

Die Microsoft-Variante

Das Microsoft-Objektmodell erlaubt die zentrale Behandlung von Ereignissen mittels der folgenden Syntax:

<SCRIPT FOR=[Objekt] EVENT=[Ereignis] 
language="JavaScript">
  ...[Konkrete Anweisungen]...
</SCRIPT>

Als [Ereignis] geben Sie einfach die im vorherigen Abschnitt erklärten Event-Handler an (allerdings auf jeden Fall vollkommen klein geschrieben!). Mehr ist nicht notwendig, um alle Ereignisse des spezifizierten Typs von dem angegebenen Objekt zentral zu verarbeiten. Innerhalb des Scripts können Sie dann auf alle Eigenschaften des event-Objekts zugreifen, die der Internet Explorer kennt. Das gesamte Prozedere ist bedeutend unkomplizierter als bei der Netscape-Variante. Gefahren lauern aber dennoch. Schauen wir uns Beispiele an.

Beispiel 3:

Erstellen Sie die Datei Event3.htm:

<HTML>
<SCRIPT FOR=document EVENT=onclick 
language="JavaScript">
alert("Das Klickt");
</SCRIPT>
<BODY>
<H2>
Klicken Sie hier
</H2>
<H3>
Klicken Sie da
</H3>
</BODY>
</HTML>

Laden Sie sie in den Internet Explorer und klicken Sie auf die Überschriften.

Abbildung 17.4:  Der IE reagiert bei Klicks auf  die einzelnen  Elemente

Laden Sie die Datei nun in den Netscape Navigator. Es wird schnell deutlich, welche Probleme auftauchen.

1. Die Anweisung wird unerwünschterweise beim Laden der Seite abgearbeitet.
2. Dafür funktionieren die Klicks auf die Überschriften (oder auch andere Elemente) nicht.

Was ist los? Die Angabe FOR=document legt für den Internet Explorer fest, dass die zentrale Behandlung für die gesamte Webseite gilt, EVENT=onclick spezifiziert das Ereignis Mausklick. Beachten Sie bei der Spezifizierung des Ereignisses unbedingt die Groß- und Kleinschreibung! Für den Netscape Navigator sind diese Angabe unbekannt und er ignoriert sie. Dementsprechend wird er nicht den Container als verschieden von einem normalen Script-Container erkennen und die darin enthaltenen Anweisungen abarbeiten, also würde dort ein gewöhnlicher Script- Container stehen. Der Internet Explorer unterscheidet die Container - deshalb führt er die im Container notierten Anweisungen nicht beim Laden der Seite aus.

Wenn man globale Ereignisbehandlung für beide Browser-Welten sicher machen möchte, kommt man um eine Trennung nicht herum. Wir werden das morgen durchsprechen.

Betrachten wir hier als Zusammenfassung, wie beim Netscape-Modell, die spezifischen Eigenschaften des Microsoft-Ereignismodells in Zusammenhang mit dem event-Objekt.

Zur Abfrage der Zusatztasten stehen die boolschen Eigenschaften

altKey, 
ctrlKey

und

shiftKey

bereit. Sie stehen für die Zusatztasten (ALT), (CRTL) oder (ª). Wenn sie gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden, werden sie den Wert true enthalten.

Beispiel 4:

Erstellen Sie die Datei Event4.htm:

<HTML>
<SCRIPT 
  FOR=document 
  EVENT=onclick 
  language="JavaScript">
alert("Shift: " + event.shiftKey +
  " Alt: " + event.altKey +
  " Crtl: "  + event.ctrlKey);
</SCRIPT>
<BODY>
<H2>
Klicken Sie hier
</H2>
</BODY>
</HTML>

Laden Sie sie in den Internet Explorer und klicken Sie auf die Überschrift unter Verwendung der Zusatztasten.

Abbildung 17.5:  Alt war gedrückt

Die Eigenschaften

clientX

und

clientY

beinhalten die Information über die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY) der Cursorposition relativ zur oberen linken Ecke des Anzeigefensters, wenn ein Koordinaten-abhängiges Ereignis (etwa eine Mausaktion) ausgelöst wurde.

Beispiel 5:

Erstellen Sie die Datei event5.htm:

<HTML>
<SCRIPT 
  FOR=document 
  EVENT=onmouseover 
  language="JavaScript">
window.status = "X-Position: " + event.clientX +
  ", Y-Position: " + event.clientY;
</SCRIPT>
<BODY>
<H2>
Klicken Sie hier
</H2>
<IMG src="100.gif">
</BODY>
</HTML>

Laden Sie sie in den Internet Explorer und bewegen Sie die Maus auf die Überschrift oder die Grafik. In der Statuszeile wird jeweils die Mausposition angezeigt.

Abbildung 17.6:  Die Mausposition

Die Eigenschaft

keyCode

speichert bei Tastaturereignissen den dezimalen Code (ASCII-/ANSI-Wert) der gedrückten Taste.

Über die Eigenschaften

offsetX

und

offsetY

kann auf die horizontalen Pixel (offsetX) und die vertikalen Pixel (offsetY) der Cursorposition relativ zur oberen linken Ecke des Elements, das ein Ereignis ausgelöst hat, zugegriffen werden.

Es gibt im Microsoft-Modell noch ein weiteres Koordinatenpaar, welche die Cursorposition speichert. Die Variablen

x

und

y

speichern die horizontalen Pixel (x) und die vertikalen Pixel (y) der Cursorposition relativ zur oberen linken Ecke des Eltern-Elements von dem Element, das ein Ereignis ausgelöst hat. Wenn ein absolut positionierter Bereich das Eltern-Element ist, ist dessen obere linke Ecke der Bezugspunkt. Wenn das auslösende Element sonst kein Eltern-Element hat, gilt die linke obere Ecke des Dokuments als Koordinatenursprung.

Zusammenfassung

Die zentrale Ereignisbehandlung unter JavaScript ist über das event-Objekt möglich. Das event-Objekt beinhaltet Informationen über ein aufgetretenes Ereignis in einer Webseite samt der Randbedingungen, welche dabei eine Rolle gespielt haben. Allerdings ist die Anwendung des event-Objekts jeweils auf das zugrunde liegende Ereignismodell beschränkt und man sollte bei globaler Ereignisbehandlung sicherstellen, dass nur der richtige Browser das jeweilige globale Ereignismodell zu sehen bekommt.

Fragen und Antworten

Frage:
Soll man nun Ereignisse lokal über Event-Handler realisieren oder ein globales Management vorziehen?

Antwort:
Das kommt auf die konkrete Situation an. Bei nur wenigen Ereignissen und kleinen Seiten lohnt sich ein globales Management kaum. Wenn aber konsequent die logische Trennung der Bestandteile einer Webseite erfolgen soll, ist das sinnvoll. Allerdings muss dabei die Inkompatibilität der Modelle beachtet werden. Zwei getrennte Konzepte sollten realisiert werden.

Frage:
Warum behandeln wir nicht schon heute die Trennung der Browser- Welten?

Antwort:
Die Trennung an sich erfolgt über das Objekt navigator, und das wollen wir morgen etwas ausführlicher behandeln.

Frage:
Warum ist das Ereignismodell von Netscape so viel komplexer und dennoch in der Leistung eingeschränkter als das Microsoft-Modell?

Antwort:
Das Netscape-Modell ist stark von Ereignismodellen aus anderen Techniken beeinflusst. Es gibt einige Parallelen zu der Ereignisbehandlung unter Java. Das Microsoft-Modell ist einfacher und dennoch leistungsfähiger, da der Browser stärker Betriebssystembestandteile verwenden kann.

Workshop

Einige Eigenschaften des event-Objekts im Rahmen des Microsoft-Modells wurden nicht mit Beispielen getestet. Holen Sie das nach. Erstellen Sie Beispiele, die diese Eigenschaften ausgeben oder sonst wie verwenden. Benutzen Sie dabei auch andere Ereignistypen.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

1. Was stimmt hier nicht?

   window.captureEvents(Event.Click);
   

2. Stimmt das?

   window.captureEvents(
   Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)
   

3. Ist das korrekt oder müssen for und event groß geschrieben werden?
4. Was macht releaseEvents()?
5. Was macht routeEvent()?
6. Stimmt das?

   window.captureEvents(Event.ONCLICK);
   

Feuern ist hier nicht willkürlich als Wortspiel gewählt - das wird gleich noch eine Rolle spielen.

Übermäßiges Hecheln, Stöhnen, leuchtend rote Birne, Zitate wie »Ich kann nicht mehr« oder »Ich will nicht mehr« usw.

Der Fitnesstrainer kann nicht jeden individuell anfeuern - nur halt in Ausnahmesituationen oder wenn er explizit eine Botschaft (s.o.) bekommt.

:-)

Viele Quellen nennen die gesamte Thematik nur noch ein großes Chaos.