Event-Handler verwenden
Anzeigebeispiel: So sieht's aus
"Event" bedeutet "Ereignis". Event-Handler sind die Schnittstelle zwischen HTML-Datei und JavaScript-Code. Event-Handler erlauben Ihnen, in JavaScript auf Anwenderereignisse wie Mausklicks, Fensterwechsel usw. zu reagieren, d.h. JavaScript-Code auszuführen, wenn so ein Ereignis stattfindet. Mit Hilfe von Event-Handlern ist es beispielsweise möglich, einen Befehl wie "Zeige in der Statuszeile Text X an, wenn der Anwender mit der Maus über den Verweis fährt" zu realisieren.
Beispiel:
<html>
<head>
<title>Datum und Zeit</title>
<script language="JavaScript">
<!--
function CheckInput()
{
var Fehler = 0;
if(document.Umfrage.Absender.value == "")
{
Fehler = 1;
alert("Bitte geben Sie Ihren Namen ein");
document.Umfrage.Absender.focus();
}
if(document.Umfrage.eMail.value == "")
{
Fehler = 1;
alert("Bitte geben Sie Ihren E-Mail-Adresse ein");
document.Umfrage.eMail.focus();
}
if(document.Umfrage.Text.value == "")
{
Fehler = 1;
alert("Bitte geben Sie einen Kommentar ein");
document.Umfrage.Text.focus();
}
if(Fehler == 0)
document.Umfrage.submit();
}
// -->
</script>
</head>
<body>
<form action="mailto:s.muenz@euromail.com"
name="Umfrage" method=post enctype="text/plain">
Ihr Name:<br>
<input type=text name="Absender" size=50
onFocus="window.status='Bitte geben Sie Ihren Namen ein';return true;"><p>
Ihre E-Mail-Adresse:<br>
<input type=text size=50 name="eMail"
onFocus="window.status='Bitte geben Sie Ihre E-Mail-Adresse ein';return true;"><p>
Was ist "Telepolis"?:<br>
<textarea cols=50 rows=10 name="Text"
onFocus="window.status='Bitte geben Sie Ihre Antwort ein';return true;"></textarea><p>
<input type=submit value="Absenden" onClick="CheckInput()">
<input type=reset value="Abbrechen">
</form>
</body>
</html>
|
Erläuterung:
Das Beispiel zeigt eine komplette HTML-Datei. Die Datei enthält ein 
Formular, dessen Eingaben überprüft werden sollen, bevor das Formular abgeschickt wird. Während der Eingabe werden in der Statuszeile des WWW-Browsers außerdem erläuternde Aufforderungen zu den jeweils aktiven Feldern angezeigt. Die erläuternden Anzeigen in der Statuszeile werden mit Hilfe des Event-Handlers onFocus= realisiert (onFocus = beim Aktivieren). Dazu wird der Eigenschaft status des 
Objekts window der gewünschte Text zugewiesen. Die zusätzliche Anweisung return true; ist bei Textanzeigen in der Statuszeile des Browsers immer erforderlich.
Beim Absenden der Formulardaten soll werden, daß in jedem der drei Eingabefelder des Formulars tatsächlich etwas eingegeben wurde. Dazu wird beim Absende-Button mit Hilfe des Event-Handlers onClick= die JavaScript- Funktion CheckInput() aufgerufen (on Click = beim Anklicken). Die Funktion CheckInput() wird nur dann aufgerufen, wenn der Anwender auf den Absende-Button klickt. Sie wird zuvor in einem JavaScript-Bereich definiert. Die Funktion überprüft die drei Eingabefelder auf Inhalt. Wenn überall etwas eingegeben wurde, schickt die Funktion das Formular ab (mit document.Umfrage.submit();). Andernfalls werden entsprechende Meldungen am Bildschirm ausgegeben, und der Anwender wird aufgefordert, das Formular richtig auszufüllen.
Event-Handler notieren Sie innerhalb von HTML-Tags wie eine zusätzliche Angabe. Welche Event-Handler Sie in welchen HTML-Tags verwenden dürfen, entnehmen Sie der 
Liste der Event-Handler. Hinter dem Namen des Event-Handler folgt ein Istgleichzeichen, und dahinter, in Anführungszeichen, eine oder mehrere JavaScript- Anweisungen. Es ist zwar erlaubt, mehrere Anweisungen innerhalb der Angabe zu notieren, aber im Normalfall sollte an dieser Stelle nur der Aufruf einer Funktion stehen. In diesem Fall darf auch das abschließende Strichpunktzeichen ; entfallen.
Liste der Event-Handler in JavaScript
Der folgende Abschnitt listet die derzeit gebräuchlichen Event-Handler auf. Die drei Pünktchen, z.B. bei onBlur="..." bedeuten, daß an der betreffenden Stelle JavaScript-Code notiert werden muß, wie 
weiter oben beschrieben.
Eine Besonderheit unter den Event-Handlern stellt die Schreibweise <a href="javascript:...">...</a> dar. Damit können Sie bei einem Anklicken eines Verweises JavaScript-Code ausführen. Dieser spezielle Event-Handler wird am Ende der folgenden Liste beschrieben.
onAbort="..." (beim Abbrechen)
onBlur="..." (beim Verlassen)
onChange="..." (bei geändertem Inhalt)
onClick="..." (beim Anklicken)
onError="..." (im Fehlerfall)
onFocus="..." (beim Positionieren)
onLoad="..." (beim Laden)
onMouseout="..." (beim Nicht-mehr-Darüberfahren mit der Maus)
onMouseover="..." beim Darüberfahren mit der Maus
onReset="..." (beim Löschen von Formulareingaben)
onSelect="..." (bei getroffener Auswahl)
onSubmit="..." (beim Absenden von Formulardaten)
onUnload="..." (beim Verlassen einer Datei)
javascript:="..." (beim Anklicken eines Verweises)
onAbort="..."
| Bedeutung |
Erlaubt |
| "beim Abbrechen" des Ladevorgangs einer Grafik.
|
In Grafiken:
<img src="datei.gif" onAbort="...">
|
onAbort= ist für Hinweise gedacht, wenn der Anwender eine WWW-Seite beenden will, auf der noch nicht alle Grafiken geladen sind. Mit <img src="logo.gif" onAbort="alert('Das Logo ist noch nicht geladen')"> können Sie beispielsweise ein Meldungsfenster für diesen Fall ausgeben.
onBlur="..."
onBlur= ist z.B. zum Überprüfen von Formulareingaben geeignet. Der mit onBlur verknüpfte JavaScript-Code wird jedoch nur dann ausgeführt, wenn der Anwender in einem der genannten Formluarelemente etwas eingegeben bzw. ausgewählt hat.
onChange="..."
onChange= eignet sich z.B. zum Überprüfen von Formulareingaben. Mit <input type=text name="Alter" onChange="PruefeObZahl(this.form.Alter.value)"> können Sie beispielsweise nach erfolgter Eingabe in einem Feld zur Altersangabe prüfen, ob in dem Feld eine Zahl eingegeben wurde. Voraussetzug ist dabei, daß Sie in einem JavaScript-Bereich der gleichen Datei eine Funktion PruefeObZahl(Wert) definieren, die den ihr übergebenen Wert daraufhin prüft, ob die übergebenen Zeichen allesamt Ziffern sind. Für solche Überprüfungen können Sie Eigenschaften und Methoden des Objekts string verwenden.
onClick="..."
onClick= eignet sich z.B. dazu, um bei einem Anklicken eines frei definierten Buttons einen Verweis auszuführen. So können Sie beispielsweise mit <form><input type=button value="Zurueck" onClick="history.back()"></form> einen Zurück-Button definieren, der die gleiche Bedeutung hat wie der Back-Button des WWW-Browsers.
Zum Handling beim Anklicken von Verweisen gibt es den speziellen Event-Handler javascript:.
onError="..."
| Bedeutung |
Erlaubt |
| "im Fehlerfall" beim Laden von Grafiken oder bei JavaScript-Fehlern.
|
In Grafiken:
<img onError="...">
|
onError= eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene. Beachten Sie jedoch, daß dadurch nicht die Fehler selbst beseitigt werden!
onError= ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht. Wenn Sie mit onError= eine eigene Funktion in einem JavaScript-Bereich aufrufen, müssen Sie am Anfang dieses JavaScript-Bereichs - vor der Funktion - immer die Anweisung window.onerror=null notieren, sonst kann es zum Programmabsturz kommen.
Wenn Sie am Anfang eines JavaScript-Bereichs window.onerror=null notieren und der Event-Handler sonst nirgendwo in einem HTML-Tag vorkommt, werden innerhalb dieses Bereichs alle JavaScript-Fehlermeldungen unterdrückt, sofern der WWW-Browser beim Ausführen von JavaScript-Code dieses Bereichs Fehler findet.
onFocus="..."
onFocus= eignet sich z.B. zum Auskommentieren von Eingabefeldern, in die der Anwender gerade den Cursor setzt. Ein Anwendungsbeispiel dafür finden Sie weiter oben.
onLoad="..."
onLoad= eignet sich dazu, um beim Laden einer HTML-Datei bestimmte JavaScript- Funktionen auszuführen. So können Sie beispielsweise eine Funktion aufrufen, die mit dem Objekt navigator den Namen und die Version des WWW-Browsers des Anwenders ermittelt. Davon abhängig könnte die Funktion beispielsweise mit window.location.href entweder eine Datei mit oder eine ohne ActiveX-Elemente aufrufen.
Beachten Sie, daß onLoad= nur sinnvoll ist, um Funktionen aufzurufen. JavaScript-Code, der in einem JavaScript-Bereich außerhalb definierter Funktionen steht, wird beim Laden der HTML-Datei automatisch ausgeführt.
onMouseout="..."
| Bedeutung |
Erlaubt |
| "Beim Verlassen eines verweis-sensitiven Bereichs".
|
Bei Verweisen:
<a href="..." onMouseout="...">
|
onMouseOut= ist in Verbindung mit OnMouseover= sinnvoll. So können Sie beispielsweite mit <a href="seite2.htm" onMouseover="window.status='Jetzt kannst Du auf einen Verweis klicken';return true;" onMouseout="window.status='OK, Du musst nicht darauf klicken...';return true;">Hier geht's zur zweiten Seite</a> die Statuszeile des WWW-Browsers nutzen und dort Meldungen ausgeben, abhängig davon, ob der Anwender mit der Maus über einen Verweis fährt oder die Maus wieder von dem Verweis wegbewegt, ohne ihn angeklickt zu haben.
onMouseover="..."
| Bedeutung |
Erlaubt |
| "Wenn der Mauszeiger über einem verweis-sensitiven Bereich ist".
|
Bei Verweisen:
<a href="..." onMouseover="...">
|
onMouseOver= ist in Verbindung mit OnMouseout= sinnvoll. So können Sie beispielsweite mit <a href="seite2.htm" onMouseover="window.status='Jetzt kannst Du auf einen Verweis klicken';return true;" onMouseout="window.status='OK, Du musst nicht darauf klicken...';return true;">Hier geht's zur zweiten Seite</a> die Statuszeile des WWW-Browsers nutzen und dort Meldungen ausgeben, abhängig davon, ob der Anwender mit der Maus über einen Verweis fährt oder die Maus wieder von dem Verweis wegbewegt, ohne ihn angeklickt zu haben.
onReset="..."
| Bedeutung |
Erlaubt |
| "Beim Löschen aller Eingaben in einem Formular".
|
Beim Definieren von Formularen:
<form action="..." onReset="...">
|
onReset= eignet sich dazu, um JavaScript-Code auszuführen, wenn der Anwender einen Button zum Abbrechen anklickt. So können Sie beispielsweise mit <form action="mailto:s.muenz@euromail.com" onReset="alert('Jetzt sind alle Ihre Eingaben futsch, wie schade!')"> eine Meldung am Bildschirm ausgeben, nachdem der Abbrechen-Button gedrückt wurde.
onSelect="..."
onSelect= ist wohl dazu gedacht, um in Interaktion mit dem Anwender Text weiterzuverarbeiten. Der Anwender kann in einem Eingabeformular mit der Maus Text selektieren. Wenn dies der Fall ist, kann onSelect= die Aktion abfangen und JavaScript-Code ausführen. Leider gibt es jedoch bislang kein JavaScript-Objekt, in dem der selektierte Text gespeichert ist.
onSubmit="..."
onSubmit= eignet sich dazu, um JavaScript-Code auszuführen, nachdem der Anwender einen Button zum Absenden eines Formulars anklickt. So können Sie beispielsweise mit <form action="mailto:s.muenz@euromail.com" onSubmit="alert('Vielen Dank fuer Ihr Feedback!')"> eine Meldung am Bildschirm ausgeben, nachdem der Absenden-Button gedrückt wurde.
onUnload="..."
onUnLoad= eignet sich dazu, um JavaScript- Funktionen auszuführen, wenn der Anwender die WWW-Seite verlassen will. So können Sie beispielsweise mit <body onUnload="document.close();document.open('text/html');document.write('<h1>Bye Bye</h1>');"> einen Bye-Bye-Text beim Beenden der aktuellen WWW-Seite im Anzeigefensters des WWW-Browsers anzeigen.
javascript:"..."
| Bedeutung |
Erlaubt |
| "Beim Anklicken eines Verweises".
|
Bei Verweisen:
<a href="javascript:...">Verweistext</a>
|
javascript: ist dazu gedacht, JavaScript-Code auszuführen, wenn der Anwender auf einen Verweis klickt. Ein Anwendungsbeispiel finden Sie im Abschnitt Zwei Frames gleichzeitig ändern
© 1997 
Stefan Münz, s.muenz@euromail.com
