7.2
Konkrete Ereignisbehandlung
Die Technik der konkreten Ereignisbehandlung im Rahmen einer
Webseite basiert darauf, dass man damit einen Browser anweist, permanent auf
das Auftreten von bestimmten Ereignissen zu warten. Er lauscht in gewisser
Weise wie ein Radioempfänger in einem Auto auf einer bestimmten Frequenz, ob
durch ein Signal eine Verkehrsmeldung angekündigt und dann gesendet wird, um
dann dann darauf zu reagieren (das Autoradio stellt sich beispielsweise lauter,
der Browser ruft gegebenenfalls eine Funktion oder eine Objektmethode auf).
Dieses "Hören auf das Auftreten von Ereignissen"[17]
läuft parallel zum normalen Programmablauf und vor allem im Hintergrund ab. Man
sagt im Fall einer Webseite dem Browser praktisch nur noch "pass auf das
Ereignis X auf" und erstellt den Rest der Webseite samt
JavaScript-Elementen.
7.2.1
Event-Handler
Den Ansatz der Ereignisbehandlung über Event-Handler gibt es
seit HTML 4.0. Es handelt sich um universelle Attribute für Ereignisse in einer
Webseite. Um es nochmals deutlich zu machen – Event-Handler sind
HTML-Attribute, die direkt in einen HTML-Tag geschrieben werden. Sie sind
vollkommen unabhängig von JavaScript oder einer anderen Scriptsprache. Sie
rufen nur ein beliebiges Script beim Eintreten des jeweils zugehörigen
Ereignisses auf. Das W3-Konsortium hat Event-Handler offiziell in den
HTML-Sprachstandard aufgenommen und auch festgelegt, in welchen HTML-Tags
welcher Event-Handler vorkommen darf (zumindest von der Theorie her – was die
Browser-Hersteller daraus machen, ist ein anderes Thema). Event-Handler sind
ein wichtiges Bindeglied zwischen HTML und Scripten, aber da sie explizit zu
HTML zählen, spielt damit Groß- und Kleinschreibung bei der Notation in der Webseite
keine Rolle. Die Grundsyntax der Verwendung von Event-Handlern sieht immer
gleich aus:
<[HTML-Tag] [ATTRIBUTE]
on[EventHandler]="Script-Anweisungen">
Dabei ist [HTML-Tag]
ein beliebiger HTML-Tag, welcher die Reaktion auf ein Ereignis unterstützt (das
unterscheidet sich wie gesagt in verschiedenen Browsern massiv, weshalb wir
darauf noch genauer eingehen müssen).
[ATTRIBUTE] sind
die normalen HTML-Attribute, welche den HTML-Tag bezüglich seiner üblichen
HTML-Auswirkungen spezifizieren.
on[EventHandler]
ist der konkrete Name des Ereignisses, auf welches reagiert werden soll und "Script-Anweisungen"
sind die tatsächlichen Script-Anweisungen, welche bei Auftreten des
spezifizierten Ereignisses ausgeführt werden sollen. Ein Event-Handler-Ereignis
sieht aus wie jedes gewöhnliche HTML-Attribut. Gemeinhin beginnen die Namen von
Ereignissen mit der Silbe on
(meist kleingeschrieben, aber das ist nicht zwingend), gefolgt von einer
sprechenden Beschreibung des Ereignisses. Der besseren Lesbarkeit wegen wird
meistens jeder eigenständige Begriff im Bezeichner mit einem Großbuchstaben
begonnen (etwa onMouseOver,
onLoad, onUnLoad, onClick). Hinter dem Namen des Ereignisses wird
ein Istgleichzeichen notiert, gefolgt von einer – meist zu Sicherheit in
Anführungszeichen notierten – JavaScript-Anweisung oder -Funktion. In eine
Event-Handler-Struktur können über Semikolon abgetrennt mehrere
JavaScript-Anweisungen hintereinander geschrieben werden. Dies ist aber selten
sinnvoll. Besser ist die Erzeugung einer eignen JavaScript-Funktion, welche
dann alle Anweisungen enthält, welche bei Auftreten eines Ereignisses
ausgeführt werden sollen. Wir beschränken uns in der Folge auf diese Variante.
Grundsätzlich muss man die einzelnen Situationen
unterscheiden, in welchen ein Script aufgerufen werden soll.
7.2.2
Aufruf beim Start/Verlassen der HTML-Datei
Der Aufruf einer JavaScript-Funktion beim Start der
HTML-Datei ist der Fall, der in unseren bisherigen Beispielen am häufigsten mit
dem Ausführen eines Scripts in Verbindung gebracht wurde. Es gibt nun zwei
Varianten, wie das realisiert werden kann.
Mit dem Event-Handler onLoad als einer Erweiterung des <BODY>-Tags und
Einschluss aller gewünschten Anweisungen in eine JavaScript-Funktion, die mit
dem Event-Handler aufgerufen wird.
Indem die auszuführenden Script-Anweisungen einfach in einen <SCRIPT>-Container notiert werden.
Die Syntax beim Verwenden des Event-Handlers ist folgende:
<BODY onLoad="[Funktionsname]">
Damit erfolgt der Aufruf der als Wert des Attributes
angegebenen JavaScript-Funktion beim Start der HTML-Datei.
Verwandt zu dem Laden einer Webseite ist das
Parallelereignis zum Entfernen einer Seite aus dem Speicher. Etwa wenn eine
neue Seite geladen wird. Dafür gibt das Ereignis onUnload, das analog in den <BODY>-Tag integriert
werden kann. Sie können beide Ereignisse in dem <BODY>-Tag angeben, um sowohl
beim Start einer Seite, als auch bei deren Verlassen eine bestimmte Aktion
auszulösen.
Die Variante mit dem Event-Handler hat beim Laden einer
Webseite einige Vorteile. Es ist deutlich gekennzeichnet, dass beim Laden der
Webseite eine Funktion ausgeführt wird und welche. In großen Seiten kann das
sonst nicht ganz leicht zu sehen sein. Dazu kommt, dass man den
Script-Container an beliebiger Stelle notieren kann und die Funktion extakt
dann aufgerufen wird, wenn der <BODY>-Tag erreicht wird. Außerdem entfallen einige
Probleme mit globalen Variablen, die insbesondere der Netscape Navigator in
einigen Situationen damit hat, wenn ohne den Event-Handler gearbeitet wird.
Allerdings hat auch die direkte Notation des
Funktionsaufrufs in einen <SCRIPT>-Container durchaus
Vorteile gegenüber dem Event-Handler-Einsatz. Vor allen Dingen, wenn man
sämtlichen JavaScript-Code in Funktionen packt und nur den Aufruf einer
Funktion – die man ansonsten im Event-Handler angeben würde – als direkt
auszuführenden Code im <SCRIPT>-Container
notiert. Das Verfahren bedeutet weniger Code (wenngleich unwesentlich), denn onLoad= entfällt. Aber
vor Allem gibt es einige Situationen, wo der Event-Handler nicht richtig
ausgeführt wird. Beispielsweise in Verbindung mit Frames und dynamisch durch
JavaScript geschriebenen Webseiten wird es beim einigen Browsern und dem onLoad-Event-Handler
Probleme geben, wenn nach dem Laden der Seite die Größe des Browser-Fensters
verändert wird. Frames bedeuten die Aufteilung des Anzeigebereichs eines
Browsers in einzelne Segmente, die unabhängig mit HTML-Dateien (oder auch
anderen vom Browser verstandenen Dateitypen) als Inhalt gefüllt werden können.
Wenn in einer in einem Frame geladenen Webseite mit onLoad eine Funktion aufgerufen wird,
welche die Seite dynamisch schreibt, wird der Frame-Inhalt beim Verändern der
Größe neu aufgebaut, die Funktion jedoch möglicherweise nicht mehr ausgeführt.
Die direkte Notation des Script-Aufrufs verhindert das Problem, das auf
fehlerhafte Browserprogrammierung zurückzuführen ist. Obwohl mittlerweile viel
Zeit verstrichen ist, sollte man auch beachten, dass Event-Handler erst seit
HTML 4.0 offiziell integriert sind. Die direkte Notation wird von mehr Browsern
verstanden.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function wk() {
alert("Willkommen");
}
function bey() {
alert("Du willst schon gehen?");
}
–>
</SCRIPT>
</HEAD>
<BODY onload="wk()"
onUnload="bey()">
</BODY>
</HTML>
Listing 7.1: Laden und Verlassen
Beim Laden der Webseite wird der Anwender mit einem
Mitteilungsfenster begrüßt.
132 116
/laden1a
7.1: So werden Sie beim Laden der Seite
begrüßt
Wenn der Browser wieder geschlossen oder eine neue Seite
geladen wird, erscheint zum Abschied ein weiteres Mittleilungsfenster.
185 116
/laden1b
7.2: Das erscheint beim Verlassen der Seite
|
Einige Browser – etwa der Netscape Navigator in einigen |
7.2.3
Klick, Doppelklick und Reaktion auf Maustasten
Die neben dem Laden bzw. Entfernen einer Webseite wohl
wichtigste Situation, unter der ein Script ausgeführt werden muss, ist der
Klick bzw. ein Doppelklick auf ein entsprechend sensibles Element in der
Webseite. Was aber ein für einen Klick bzw. Doppelklick empfängliches Element
ist, das unterscheidet sich je nach Event-Modell erheblich. Immer funktioniert
der Klick auf eine Referenz, wobei darunter eine Schaltfläche in einem Formular
oder ein Hyperlink gemeint ist. Sie erweitern den entsprechenden Tag dem
Attribut onClick. Dabei gilt die allgemeine Syntax:
<[HTML-Tag] onClick="[Funktionsname]">
Dies bedeutet beispielsweise für den Fall eines Hyperlinks,
dass die Syntax so aussieht:
<A href=[URL]
onClick="[Funktionsname]">…</a>
Beachten Sie aber bei einem Hyperlink, dass dort bei einem
Klick natürlich auch der Hyperlink selbst ausgelöst wird. Wenn damit aber kein
Verlassen der aktuellen Seite verbunden sein soll, notieren Sie einfach das
Zeichen # in
die Referenz. Damit verhindern Sie ein Verlassen der Seite bzw. der aktuell
angezeigten Stelle der Webseite.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function klick() {
alert("Beim Klick war es folgendes Datum: "
+ (new Date()));
}
–>
</SCRIPT>
</HEAD>
<BODY>
<a href="#"
onClick="klick()">Das Datum und die Uhrzeit</a>
</BODY>
</HTML>
Listing 7.2: Ein Hyperlink als Container für
onClick
393 176
/onclick1
7.3: Aufruf per Klick auf den Hyperlink
Bei dem Event-Handler onClick zeigen sich die Unterschiede
zwischen dem ursprünglichen Netscape-Ereignismodell und dem von Microsoft
unterstützten Ereignismodell ziemlich extrem. Während Netscape bis zur Version
6 des Navigators das Attribut nur in den HTML-Tags <A>, <AREA>, <INPUT>
und <TEXTAREA>
erlaubt, unterstützt der Explorer nahezu alle offiziellen HTML-4.0-Tags. So
könnte auch mit einer Überschrift, ein Bild oder eine Trennlinie der
Event-Handler gekoppelt werden.
Die doch sehr eingeschränkte Unterstützung von
Event-Handlern durch Netscape in den bisherigen Versionen gilt leider nicht nur
bei diesem Fall, sondern bei den meisten weiteren Event-Handlern. Manchmal
nicht ganz so krass, aber fast immer kann man für eine Netscape-Unterstützung
nur eine eng begrenzte Auswahl der offiziell für HTML 4.0 freigegebenen
Elemente nutzen. Die meisten Event-Handler dürfen bei fast allen Tags stehen
und der Internet Explorer nutzt das auch aus. Der Netscape Navigator bis zur
Version 4.7x und kompatible Browser nutzen immer nur eine kleine Auswahl. Das
ist aber in der Regel durch einen einfachen Trick vollständig zu kompensieren.
Indem ein Element, das auf einen Klick reagieren soll, einfach in einen
Hyperlink-Container wie oben gepackt und das Attribut border=0 gesetzt (bzw. bei Texten mit
Style Sheets die Unterstreichung unterbunden) wird, ist das Problem praktisch
gelöst. Und nicht nur das – der Anwender sieht durch die Veränderung des
Mauszeigers zu einer Hand, dass an dieser Stelle ein sensitives Element
vorhanden ist. Ab der Version 6 des Navigators hat Netscape allerdings die
Segel gestrichen und ist auf die weitergehende Unterstützung von onClick und
anderen Event-Handlern eingeschwenkt. Zur Ehrenrettung von Netscape sei
zusätzlich angemerkt, dass sie bereits vor HTML 4.0 ein Konzept entwickelt
haben, das eine universelle Ereignisbehandlung gewährleistet. Dieses Konzept
basiert jedoch nicht auf den Event-Handlern, sondern einem Ereignis-Objekt. Als
HTML 4.0 eingeführt wurde, hat das W3C sich explizit gegen den Netscape-Entwurf
entschieden. Netscape sah sich also gezwungen, einen Teil der Event-Handler zu
integrieren, wollte aber nicht ganz auf sein Konzept verzichten. Es wird also
vieles, was unter Netscape mit den Event-Handlern ursprünglich nicht
funktionierte, mit dem Netscape-Ereignis-Objekt realisierbar sein. Besonders
viel Sinn macht der Event-Handler in Verbindung mit Formularen und dort dem
Schaltflächen-Element.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function klick() {
alert("Klick");
}
–>
</SCRIPT>
</HEAD>
<BODY>
<form><input
type="Button" value="Klick mich" onClick="klick()"></form>
</BODY>
</HTML>
Listing 7.3: Ein Button als Container für onClick
397 224
/onclick1b
7.4: Aufruf per Klick auf den Button
Eng verwandt mit dem einfachen Klick auf ein sensitives
Element ist die Reaktion auf Doppelklicks. Mit dem Event-Handler onDblClick können Sie auf den Doppelklick eines Anwenders auf ein Element reagieren. Die Unterstützung ist in den verschiedenen Event-Modellen wie beim einfachen Klick gegeben.
|
Unabhängig davon, dass Doppelklicken in einer Webseite |
In den gleichen Kontext wie vollständige Klicks fallen auch
die beiden Event-Handler onMouseDown und onMouseUp. Sie werden zur Überwachung des Drückens einer Maustaste und deren Loslassen verwendet. Sie werden wie das Ereignis onClick
verwendet, nur halt bei der jeweiligen Teilaktion ausgelöst. Das nachfolgende
Beispiel schreibt beim Drücken der Maustaste auf dem Button in der Statuszeile
des Browsers eine Meldung und beim Loslaswen wieder eine andere Meldung.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function mDown() {
status="Maustaste gedrückt";
}
function mUp() {
status="Maustaste losgelassen";
}
–>
</SCRIPT>
</HEAD>
<BODY>
<form><input
type="Button" value="Klick mich"
onMouseDown="mDown()"
onMouseUp="mUp()"></form>
</BODY>
</HTML>
Listing 7.4: Maustaste rauf und runter
393 222
/mdown1
7.5: Maustaste gedrückt – beachten Sie die
Statuszeile
397 224
/mdown2
7.6: Maustaste wieder losgelassen. In der
Statuszeile erscheint eine andere Meldung
7.2.4
Überstreichen mit dem Mauszeiger
Das Überstreichen eines Elements in einer Webseite (etwa
eine Grafik oder eine Hyperlink) mit dem Mauszeiger ist auch ein oft zu
findendes Ereignis, bei dem eine JavaScript-Funktion aufgerufen werden kann.
Dazu muss der Tag des entsprechenden Elementes mit dem entsprechenden
Event-Handler gekoppelt werden. Das kann einmal onMouseOver sein, womit eine Reaktion auf den Eintritt des Mauszeigers in den Bereich eines Elementes
überwacht werden kann. Der verwandte Event-Handler onMouseOut erlaubt die Reaktion in dem Moment, wenn der Mauszeiger den Bereich eines Elementes wieder
verläßt.
Allgemein muss es sich bei dem Element um eine
verweis-sensitive Referenz handeln, bei deren beim Überstreichen mit dem
Mauszeiger die JavaScript-Funktion direkt aufgerufen wird. Allerdings verstehen
Browser wie der Netscape Navigator vor der Version 6 darunter nur einen Link
bzw. den <AREA>-Bereich,
wie er bei verweis-sensitiven Grafiken vorkommt. Andere Browser erlauben die
Attribute bei jedem HTML-Element.
7.2.5
Mausbewegungen
Die Bewegung der Maus (unabhängig davon, ob die Maustaste
gedrückt ist oder nicht) innerhalb des Anzeigebereichs vom Browser erzeugt ein
eignes Ereignis. Der zugehörige Event-Handler heißt onMouseMove. Das Attribut wird in Netscape-Versionen vor dem Navigator 6 überhaupt nicht unterstützt.
Dieser Event-Handler ist nicht unproblematisch. Immerhin wird bei jeder
Mausbewegung über einem Bereich eine Funktion ausgelöst. Es gibt nicht viele
sinnvolle Anwendungen, permanent eine Funktion aufzurufen, wenn sich der
Mauszeiger in einem gewissen Bereich bewegt.
7.2.6
Tastaturereignisse
Die Reaktion auf das Betätigen einer (beliebigen) Taste auf
der Tastatur einen weiteren Kandidaten für aufzufangende Ereignisse im
Rahmen einer Webseite. Diese werden aber erst seit JavaScript 1.2 offiziell
unterstützt. Wie bei der Maustaste unterscheidet JavaScript beim Betätigen
einer Keyboard-Taste zwischen verschiedenen Ereignissen:
Dem vollständigen Tastendruck
Dem Drücken einer Taste
Dem Loslassen einer Taste
Sowohl der vollständige Tastendruck, als auch die jeweiligen
Teilphasen des Drückens und des Loslassen einer Taste jeweils ein eignes
Ereignis. onKeyPress, onKeyDown und onKeyUp sind die jeweiligen Event-Handler. Alle drei Attribute sind im alten Netscape-Ereignismodell
nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit ihrem
Ereignis-Objekt. Das offizielle HTML 4.0 (und Microsoft weitgehend) erlauben
wieder den Einsatz bei den meisten HTML-Tags, wobei es etwas schwierig ist, zu
bestimmen, auf welchem Element ein Tastatur-Ereignis stattgefunden hat (es gibt
ja keine X/Y-Koodinaten wie beim Mauszeiger). Die Event-Handler haben nicht die
Bedeutung der Maus-Events. Zumal auch die Bedienung einer Webseite im
wesentlichen über die Maus erfolgt.
7.2.7
Aktivierung und Verlassen eines Elements
Hauptsächlich in Zusammenhang mit Formularen treten die
folgenden Ereignisse auf:
Die Reaktion auf die Aktivierung eines Elementes
Die Reaktion auf die Deaktivierung eines Elementes, d.h. das
Element wird verlassen und in der Regel ein neues Element ausgewählt
Bei der Aktivierung bzw. Selektion eines Elements kann über
den Event-Handler onFocus das Ereignis beobachtet werden. Sie können auch auf das Verlassen eines zuvor aktivierten Elementes reagieren. Dazu gibt es den Event-Handler onBlur. Sowohl Netscape, als auch Microsoft erlauben beide Attribute bei einigen HTML-Tags.
7.2.8
Reaktion auf Änderung
Das ausschließlich bei Formularen vorkommende Ereignis
Änderung (Event-Handler onChange) erlaubt die Reaktion für den Fall, dass ein Element in einem Formular einen geänderten Wert erhalten hat. Es wird in der Regel in den HTML-Tags <INPUT>, <SELECT> und <TEXTAREA>
unterstützt.
7.2.9
Reaktion auf Zurücksetzen oder Absenden eines Formulars
Das Verständnis der beiden Event-Handler onReset und onSubmit ist ohne etwas erweiterte Kenntnisse von Formularen nicht einfach. Deshalb hier eine kurze
Erklärung zu Formularen, die dem eigentlichen Abschnitt dazu etwas vorgreift (siehe Seite 250). In dem <FORM>-Container eines Formulars
können Angaben gemacht werden, wohin ein Formular gesendet werden (falls die
Anwendereingaben per Internet versandt werden sollen) und wie die Versendung
erfolgen soll. Dabei erfolgt normalerweise die Versendung ohne irgendwelche
Kontrolle, wenn eine Absenden-Schaltfläche betätigt wird, die über die Syntax
<INPUT type="submit" value=[Beschriftung
des Buttons]>
erzeugt wird.
Beispiel:
<INPUT type="submit"
value="Ok">
Desweiteren gibt es in den meisten Formularen eine
Schaltfläche, welche das Formular bei Bedarf wieder leert, d.h. zurücksetzt.
Das wird über die Syntax
<INPUT type="reset" value=[Beschriftung
des Buttons]>
realisiert.
Die Reaktion auf das Zurücksetzen eines Formulars über einen
Event-Handler (onReset)
erlaubt die Erweiterung der Funktionalität, welche über die durch HTML
generierte ABBRECHEN-Schaltfläche
standardmäßig erfolgt. Beim Anklicken dieses Buttons werden standardmässig alle
Eingaben im Formular gelöscht. Wenn jedoch im einleitenden Formular-Tag (!) der
Event-Handler onReset
notiert ist, wird statt dessen die dort notierte JavaScript-Anweisung
ausgeführt. Sie fangen also die normale Reaktion des Formulars auf Drücken der
Schaltfläche ab. Damit können Sie beispielsweise eine Meldung generieren, die
einem Zurücksetzen eines Formulars vorangestellt wird und gegebenenfalls noch
eine Abbruchmöglichkeit erlaubt. Wichtig ist, dass – wenn Sie eine Aktion noch
abfangen wollen – vor dem Name der Funktion das Schlüsselwort return notiert
wird und in der Funktion als Rückgabewert ein Boolean-Wert zurückgegeben wird
(Rückgabe von false
durch die aufgerufene Funktion bricht die Aktion ab).
Beispiel:
<FORM Name="meinFormular"
onReset="return wirklich()">
Vollkommen analog ist der Event-Handler onSubmit zu sehen.
Er erweitert nur statt der ABBRECHEN-Schaltfläche den Submit-Button,
mit dem ein Formular weggeschickt wird. Statt es einfach abzusenden, kann eine
JavaScript-Funktion aufgerufen werden, die beispielsweise überprüft, ob alle
Felder eines Formulars ausgefüllt sind.
Beispiel:
<FORM Name="meinFormular"
onSubmit="return kontrolle()">
7.2.10
Reaktion bei der Selektion von Text
Über den Event-Handler onSelect können Sie auf die Situation reagieren, wenn ein Anwender Text selektiert. Im alten Netscape-Ereignismodell war der
Event-Handler nur bei den Tags <INPUT> und <TEXTAREA> möglich, im
Microsoft-Modell und dem neuen Netscape-Modell in nahezu alle HTML-Tags, die
sich optisch in einer Webseite äußern.
7.2.11
Unterbrechung eines Bildladevorgangs
Ein Ladevorgang einer Grafik in einen Browser kann durch
zwei Situationen abgebrochen werden:
1.
Abbruch durch den Anwender.
2.
Fehler beim Laden.
Deshalb sind zwei Event-Handler als zusätzliche Attribute
des <IMG>-Tags
möglich.
Jeder Browser verfügt über einen ABBRUCH-Button. Mit dem
Event-Handler onAbort soll die Situation behandelt werden, wenn ein Anwender diesen ABBRUCH-Button
drückt und gerade eine Grafiken geladen wird.
Beispiel:
<IMG src="foto.jpg" width=400
onAbort="warum()">
Damit lassen sich etwa Meldungen ausgeben, ob vielleicht
nicht doch die Grafik geladen werden sollte – sie ist ja soooooo interessant!
Wenn beim Laden einer Grafik ein Fehler auftritt, können Sie
über den Event-Handler onError darauf reagieren. Damit ist im wesentlichen die Ausgabe von eignen Fehlermeldungen gemeint. Eine vollständige Fehlerbehandlung wie in anderen Programmiersprachen kann
damit nicht realisiert werden.
Beispiel:
<IMG src="foto.jpg" width=400
onError="mist()">
Mehr zu den HTML-Tags, bei denen
die einzelnen Event-Handler verwendet werden dürfen, finden Sie im Anhang auf
Seite 420.
7.2.12
Der explizit Aufruf eines Event-Handlers
Ein Event-Handler kann auch über eine andere Art ausgelöst werden. Etwa wie in nachfolgende Beispiel:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mFunktion() {
alert("Herzlich Willkommen");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
NAME="mFormular">
<INPUT TYPE="button"
NAME="mButton" value="OK">
</FORM>
<SCRIPT
LANGUAGE="JavaScript">
document.mFormular.mButton.onclick =
mFunktion
</SCRIPT>
</BODY>
</HTML>
Listing 7.5: Der explizit Aufruf eines
Event-Handlers
Die in dem Beispiel verwendete Syntax beinhaltet eine
Funktion, die in dem zweiten Script-Container dem Formular mFormular und dort
dem Element mButton
zugeordnet wird. Dabei sind zwei Dinge zu beachten:
1.
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. Als HTML-Attribute
hingegen müssen bei Event-Handlern die Klammern notiert werden.
2.
In JavaScript 1.1 und früheren Version muss der Event-Handlername (als
Bestandteil des Scripts – das betrifft nicht die HTML-Attribute) vollständig in
Kleinbuchstaben notiert werden (wie in dem Beispiel), wobei diese Technik so
unter JavaScript 1.0 aber nicht funktioniert.