SELFHTML: JavaScript / Sprachelemente / Event-Handler

SELFHTML/Quickbar JavaScript Sprachelemente

	Event-Handler
	Allgemeines zu Event-Handlern onAbort (bei Abbruch) onBlur (beim Verlassen) onChange (bei erfolgter Änderung) onClick (beim Anklicken) onDblClick (bei doppeltem Anklicken) onError (im Fehlerfall) onFocus (beim Aktivieren) onKeydown (bei gedrückter Taste) onKeypress (bei erfolgtem Tastendruck) onKeyup (bei losgelassener Taste) onLoad (beim Laden einer Datei) onMousedown (bei gedrückter Maustaste) onMousemove (bei weiterbewegter Maus) onMouseout (beim Verlassen des Elements mit der Maus) onMouseover (beim Überfahren des Elements mit der Maus) onMouseUp (bei losgelassener Maustaste) onReset (beim Zurücksetzen des Formulars) onSelect (beim Selektieren von Text) onSubmit (beim Absenden des Formulars) onUnload (beim Verlassen der Datei) javascript: (bei Verweisen)

Allgemeines zu Event-Handlern

Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden in Form von Atrributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen (siehe auch Universalattribute: Event-Handler). Dort wird auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem dabei ist jedoch, daß die Praxis derzeit noch stark davon abweicht - zumindest bei Netscape. Der MS Internet Explorer 4.x dagegen interpretiert Event-Handler weitgehend so universell wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der Event-Handler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.

Event-Handler erkennen Sie daran, daß solche HTML-Attribute immer mit on beginnen, zum Beispiel onClick=. Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onClick="Umrechnen()".

Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onClick= etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element dabei. Wenn der Event-Handler onClick= beispielsweise in einem Formularbutton notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag Ihnen jetzt selbstverständlich vorkommen. Ist es auch, solange es beispielsweise um Formularbuttons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit <div>...</div> definiert wird, einen Event-Handler wie onClick= enthalten.

Es wurden nur solche Event-Handler aufgenommen, die auch tatsächlich in HTML-Tags vorkommen können und im HTML-4.0-Standard erwähnt sind (mit Ausnahme von onAbort=). Das sind weniger, als Netscape und der MS Internet Explorer kennen. Bei Netscape kommt verwirrenderweise hinzu, daß einige Event-Handler zwar so bezeichnet werden, aber eigentlich gar nicht innerhalb von HTML-Tags vorkommen können. Es ist zu hoffen, daß es hierbei in Zukunft mehr Übereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.

onAbort (bei Abbruch)

Ist für den Fall gedacht, daß ein Anwender im Browser den Stop-Button drückt, obwohl noch nicht alle Grafiken geladen wurden.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<img>

Beispiel:

<html><head><title>Test</title>
</head><body>
<img src="grafik.jpg" width=400 height=600 alt="Grafik" 
onAbort="alert('Schade, dass Sie das Bild nicht sehen wollen')">
</body></html>

Erläuterung:

Im Beispiel wird eine Grafik in HTML referenziert. Für den Fall, daß der Anwender den Stop-Button im Browser drückt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung ausgegeben.

onBlur (beim Verlassen)

Für den Fall, daß ein Element zuvor aktiviert war und der Anwender es jetzt verläßt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<body> <frameset> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Test">
Name: <input type=text name="Eingabe" onBlur="CheckInhalt(this.value)">
</form>
<script language="JavaScript">
document.Test.Eingabe.focus();
function CheckInhalt(Feld)
{
 if(Feld == "")
 {
  alert("Namensfeld muss einen Inhalt haben!");
  document.Test.Eingabe.focus();
  return false;
 }
}
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthält. Unterhalb des Formulars ist ein JavaScript-Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil zu Beginn des Bereichs gleich eine Anweisung ausgeführt wird, die die Existenz des Formulars bereits voraussetzt. Diese Anweisung (document.Test.Eingabe.focus();) setzt den Cursor in das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er irgendwo anders hin, wird der EventHandler onBlur aktiv, der im HTML-Tag des Eingabefeldes notiert ist. Dabei wird die Funktion CheckInhalt() aufgerufen, die ebenfalls in dem JavaScript-Bereich notiert ist. Diese Funktion fragt ab, ob die ihr übergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in das Feld positioniert.

onChange (bei erfolgter Änderung)

Für den Fall, daß ein Element einen geänderten Wert erhalten hat.

Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags:
<input> <select> <textarea>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Test">
<textarea rows=10 cols=40 onChange="alert(this.value)">Ihr Kommentar!</textarea>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschließend woanders hin klickt, wird der Event-Handler onChange aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle geänderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.

onClick (beim Anklicken)

Für den Fall, daß der Anwender ein Element anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form>
<input size=30 name="Ausgabe" readonly><br>
 <input type=button value="Letzter Update"
 onClick="this.form.Ausgabe.value=document.lastModified">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf "readonly", also nur Lesen gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift "Letzter Update". Beim Anklicken des Buttons wird der Event-Handler onClick aktiv, der im HTML-Tag des Buttons definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten Änderung am Dokument geschrieben.

onDblClick (bei doppeltem Anklicken)

Für den Fall, daß der Anwender ein Element anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Rechnen">
Wert: <input size=10 name="Wert">
<input type=button value="Doppelklick = hoch 2"
onDblClick="document.Rechnen.Wert.value=document.Rechnen.Wert.value*document.Rechnen.Wert.value">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist der Event-Handler onDblClick= notiert. Der Button reagiert daher nur auf Doppelklick. Wenn der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.

Beachten Sie:

Bei Netscape-Browsern unter Macintosh ist dieser Event-Handler nicht verfügbar!

onError (im Fehlerfall)

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.

Nach JavaScript erlaubt in folgendem HTML-Tag:
<img>

Beispiel:

<html><head><title>Test</title>
</head><body>
<img src="gibtsnicht.gif" onError="alert('Grafik kann nicht angezeigt werden')">
</body></html>

Erläuterung:

Im Beispiel wird in einer Grafikreferenz der Event-Handler onError= notiert. Er wird dann aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben.

onFocus (beim Aktivieren)

Tritt ein, wenn der Anwender ein Element aktiviert.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<body> <frame> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form>
<input size=30 onFocus="this.value='Hier Ihren Namen eingeben'"><br>
<input size=30 onFocus="this.value='Hier Ihren Wohnort eingeben'"><br>
<input size=30 onFocus="this.value='Hier Ihr Alter eingeben'"><br>
</form>
</body></html>

Erläuterung:

In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was der in die einzelnen Felder eingeben kann. Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler onFocus= des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung geschrieben, was in dem Feld einzugeben ist.

onKeydown (bei gedrückter Taste)

Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Aktualisieren()
{
  document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1 + " Zeichen eingegeben";
  return true;
} 
</script>
</head><body>
<form name="Test">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<textarea rows=2 cols=30 name="Eingabe" onKeydown="Aktualisieren(this.value)">
</textarea><br>
<input type=text readonly size=30 name="Kontrolle"><br>
<input type=reset>
</form>
</body></html>

Erläuterung:

Das Beispiel funktioniert nicht mit Netscape, nur mit dem MS Internet Explorer 4.x, der Event-Handler weitgehend nach HTML 4.0 interpretiert. Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem mehrzeiligen Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzählen muß, gibt es ein Eingabefeld, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist in dem mehrzeiligen Eingabefeld der Event-Handler onKeydown= notiert. Er bewirkt, daß, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Scriptbereich definiert ist. Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafür vorgesehene "Eingabe"-Feld.

onKeypress (bei erfolgtem Tastendruck)

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Test">
<input type=text size=30 name="Eingabe"
  onKeypress="alert(window.event.keyCode)">
</form>
</body></html>

Erläuterung:

Das Beispiel funktioniert nicht mit Netscape, nur mit dem MS Internet Explorer 4.x, der Event-Handler weitgehend nach HTML 4.0 interpretiert. Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der dezimale Tastaturwert des eingegebenen Zeichens ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler onKeypress= notiert. Er tritt in Aktion, wenn eine Taste gedrückt und wieder losgelassen wurde. Mit window.event.keyCode läßt sich nach Syntax des MS Internet Explorers der Tastaturwert des eingegebenen Zeichens ermitteln.

onKeyup (bei losgelassener Taste)

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Test">
<input type=text size=30 name="Eingabe"
  onKeyup="this.form.Ausgabe.value=this.value"><br><br>
<input type=text readonly size=30 name="Ausgabe"><br>
<input type=reset>
</form>
</body></html>

Erläuterung:

Das Beispiel funktioniert nicht mit Netscape, nur mit dem MS Internet Explorer 4.x, der Event-Handler weitgehend nach HTML 4.0 interpretiert. Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen Eingabe und Ausgabe enthält. Wenn der Anwender in dem oberen Feld, also dem, das für die Eingabe gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen für Zeichen in das untere, also das Ausgabefeld übernommen. Dazu ist im Eingabefeld der Event-Handler onKeyup notiert. Dieser Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrückt und wieder losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit this.form.Ausgabe.value=this.value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen.

onLoad (beim Laden einer Datei)

Tritt ein, wenn eine HTML-Datei geladen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
<!--
function NaviFenster()
{
 Navigation = window.open("navigat.htm","Navigation","height=100,width=300");
 Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="NaviFenster()">
</body></html>

Erläuterung:

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geöffnet, das zum Beispiel als "Fernbedienung" des Hauptfensters dienen könnte. Dazu ist im einleitenden <body>-Tag der Event-Handler onLoad= notiert. Er ruft die Funktion NaviFenster() auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum Öffnen des Zweitfensters. Das Fenster erhält auch gleich den Fokus (wird zum aktiven Fenster), sodaß es im Vordergrund des Hauptfensters zu sehen ist.

onMousedown (bei gedrückter Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrückt hält.

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt. Das Beispiel weiter unten funktioniert mit Netscape 4.x allerdings trotzdem.

Beispiel:

<html><head><title>Test</title>
</head><body>
<a href="home.htm"
onMousedown="window.status='Verweis zur Homepage';return true;">Verweis</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Bei vollständig erfolgtem Anklicken des Verweises wird ganz normal das Verweisziel, im Beispiel also home.htm, aufgerufen. Vorher jedoch, sobald der Anwender die Maustaste gedrückt und bevor er sie wieder losgelassen hat, tritt der Event-Handler onMousedown= in Aktion, der im Verweis-Tag notiert ist. Im Beispiel wird dabei in der Statuszeile des Browsers ausgegeben: Verweis zur Homepage.

onMousemove (bei weiterbewegter Maus)

Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht.

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt.

<html><head><title>Test</title>
<script language="JavaScript">
function Mauskontrolle()
{
 Pos = window.event.x + "/" + window.event.y;
 window.status = Pos;
 return true;
}
</script>
</head><body>
<p onMousemove="Mauskontrolle()">Hier ein kleiner Text</p>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem MS Internet Explorer 4.x, der die Event-Handler nach HTML 4.0 weitgehend interpretiert. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist der Event-Handler onMousemove= notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie möglich die Funktion Mauskontrolle() aufgerufen, die in einem Scriptbereich im Dateikopf notiert ist. Diese Funktion bewirkt, daß in der Statuszeile des Browsers jeweils die Koordinaten der Mausposition angezeigt werden.

onMouseout (beim Verlassen des Elements mit der Maus)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Beispiel:

<html><head><title>Test</title>
</head><body>
<a href="news.htm"
onMouseout="alert('Die News sollten Sie ruhig mal besuchen')">News</a>
</body></html>

Erläuterung:

Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus über den Verweis fährt, ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der Event-Handler onMousout= in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben, daß den Anwender darauf hinweist, daß er die News-Seite ruhig mal aufrufen soll.

onMouseover (beim Überfahren des Elements mit der Maus)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Beispiel:

<html><head><title>Test</title>
</head><body>
<h1 id="Test"
 onMouseover="document.all.Test.innerText='Sehen Sie?'"
 onMouseout="document.all.Test.innerText='Ich bin dynamisch'">Ich bin dynamisch</h1>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem MS Internet Explorer 4.x, der die Event-Handler nach HTML 4.0 weitgehend interpretiert. In dem Beispiel wird eine Überschrift erster Ordnung definiert. Innerhalb der Überschrift sind die Event-Handler onMouseover= und onMouseout= notiert. Der Event-Handler onMouseover= tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der Überschrift bewegt, und onMouseout= wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe des all-Objekts und der Eigenschaft innerText wird bei jedem Aktivwerden eines der beiden Event-Handler der Text der Überschrift dynamisch ausgetauscht. Bei onMouseover= wird ein anderer Text angezeigt, bei onMouseout= wieder der ursprüngliche Text.

onMouseup (bei losgelassener Maustaste)

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt. Das Beispiel weiter unten funktioniert mit Netscape 4.x allerdings trotzdem.

Beispiel:

<html><head><title>Test</title>
</head><body>
<a href="spiel.htm" onMouseup="alert('Spiel wird gestartet');window.location.href='selfhtml.htm';">Verweis</a>
</body></html>

Erläuterung:

Im Beispiel ist ein Verweis notiert. Wenn der Anwender den Verweis anklickt und die Maustaste losläßt, also unmittelbar vor dem Laden der Seite, auf die verwiesen wird, geht ein Meldungsfenster auf, das den Anwender in aller Dramatik noch mal darauf hinweist, daß jetzt das Spiel gestartet wird. Dazu ist im Verweis-Tag der Event-Handler onMouseup= notiert. Wenn der in Aktion tritt, wird zunächst das Meldungsfenster angezeigt. Anschließend wird die Datei spiel.htm geladen.

onReset (beim Zurücksetzen des Formulars)

Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function ResetCheck()
{
 chk = window.confirm("Wollen Sie alle Eingaben loeschen?");
 return chk;
}
</script>
</head><body>
<form name="Test" onReset="return ResetCheck()">
Name: <input size=30><br>
Idee: <input size=30><br>
<input type=reset><input type=submit>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button) enthält. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelöscht. Im Beispiel ist jedoch im einleitenden <form>-Tag der Event-Handler onReset= notiert. Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion ResetCheck() aufgerufen, die in einem Scriptbereich im Dateikopf steht. Diese Funktion fragt den Anwender in einem Bestätigungsfenster (window.confirm()), ob er wirklich alle Eingaben in dem Formular löschen will. Bestätigt er den Löschwunsch, gibt das Bestätigungsfenster den Wert true zurück. Verneint er den Löschwunsch, wird false zurückgegeben. Der Rückgabewert wird in der Variablen chk gespeichert und diese wird wiederum von der Funktion Funktion ResetCheck() an den aufrufenden Event-Handler zurückgegeben. Der Effekt ist, daß die Formulareingaben nur gelöscht werden, wenn true zurückgegeben wird.

onSelect (beim Selektieren von Text)

Tritt ein, wenn der Anwender Text selektiert.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tags:
<input> <textarea>

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Test" onReset="return ResetCheck()">
<input size=30 value="Meine Homepage" onselect="this.blur()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld definiert, das mit Text vorbelegt ist (value="Meine Homepage"). Wenn der Anwender versucht, den Text in dem Formular zu selektieren, etwa um ihn zu löschen, wird der Cursor wieder aus dem Eingabefeld entfernt. Dazu dient die Objektmethode blur().

onSubmit (beim Absenden des Formulars)

tritt ein, wenn der Anwender ein Formular absendet.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function CheckInput()
{
 for(i=0; i<document.forms[0].elements.length; ++i)
  if(document.forms[0].elements[i].value == "")
   {
    alert("Es wurden nicht alle Felder ausgefuellt!");
	document.forms[0].elements[i].focus();
	return false;
   }
  return true; 
}
</script>
</head><body>
<form onSubmit="return CheckInput();">
Feld 1: <input size=30><br>
Feld 2: <input size=30><br>
Feld 3: <input size=30><br>
<input type=submit>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars, also beim Klicken auf den Submit-Button, wird jedoch erst mal überprüft, ob in allen Feldern etwas eingegeben wurde. Wenn eines der Felder leergelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste nicht ausgefüllte Eingabefeld positioniert. Dazu ist im einleitenden <form>-Tag der Event-Handler onSubmit= notiert. Beim Absenden des Formulars wird dadurch die Funktion CheckInput() aufgerufen, die in einem Scriptbereich im Dateikopf notiert ist. Diese Funktion prüft in einer for-Schleife alle einzelnen Formularfelder, ob diese einen leeren Inhalt haben (leere Zeichenkette ""). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler onSubmit wird der Wert false zurückgegeben. Nur wenn alle Formularfelder ausgefüllt wurden, wird true zurückgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder nicht.

onUnload (beim Verlassen der Datei)

Tritt ein, wenn eine HTML-Datei verlassen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
Start = new Date();
Startzeit = Start.getTime();

function Aufenthalt()
{
 Ende = new Date();
 Endzeit = Ende.getTime();
 Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000);
 alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite");
}
</script>
</head>
<body onUnload="Aufenthalt()">
</body></html>

Erläuterung:

Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei wird mit Hilfe des Date-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen Startzeit gespeichert. Im einleitenden <body>-Tag der Datei ist der Event-Handler onUnload= notiert. Er tritt in Aktion, wenn die Datei - zum Beispiel durch Anklicken eines Verweises woandershin - verlassen wird. In diesem Fall wird im Beispiel die Funktion Aufenthalt() aufgerufen, die ebenfalls in dem Scriptbereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter Startzeit und der jetzt ermittelten "Endzeit" und gibt das Ergebnis in einem Meldungsfenster aus.

javascript: (bei Verweisen)

Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingeführt wurde, um JavaScript-Code als Verweisziel zu notieren.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Beispiel:

<html><head><title>Test</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)">Letzter Update</a>
</body></html>

Erläuterung:

Um einen Verweis dieser Art zu notieren, notieren Sie hinter dem Attribut href= in Anführungszeichen eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion aufzurufen.


weiter:	Hinweise zur Objektreferenz
zurück:	Reservierte Wörter

SELFHTML/Quickbar JavaScript Sprachelemente