Informatik :: JavaScript :: Event-Handler
Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied
zwischen HTML und JavaScript. Sie werden in Form von HTML-Attributen 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. Dort wird auch festgelegt,
in welchen HTML-Tags welcher Event-Handler vorkommen darf.
Event-Handler erkennt man daran, dass solche HTML-Attribute immer mit on beginnen (z.B. onClick). Hinter dem Gleichheitszeichen notiert man - in Anführungszeichen, eine JavaScript-Anweisung. Wenn mehrere Anweisungen ausgeführt werden sollen, dann implementiert man sich dazu am besten eine Funktion und ruft hinter dem Gleichheitszeichen 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.
Zum Definieren eines Ereignisses in Zusammenhang mit einem HTML-Element ist es lediglich erforderlich, den Event-Handler als Attribut nach dem HTML-Tag anzugeben:
<HTML-Tag Event-Handler = "JavaScript-Anweisung">
Das Ereignis onBlur tritt ein, wenn der Benutzer ein
zuvor selektiertes Element wieder verlässt. Das Verlassen eines
Elements kann mit einem Tabulatorschritt oder auch einen Mausklick auf
ein anderes Element erfolgen.
Als Anwendungsfall wäre hier die Überprüfung
der Gültigkeit einer Eingabe in ein Textfeld möglich. Anschließend
könnten Sie den Benutzer auf eine unvollständige Eingabe hinweisen
oder eine andere Aktion ausführen lassen.
Beispiel:
<html><head><title>OnBlur</title></head>
<script language="JavaScript">
function PruefeEingabe(feld)
{
if (feld.length < 6)
{alert ("Das Kennwort
muss mindestens 6 Zeichen lang sein!") }
}
</script>
<body>
<form>
Kennwort: <input name="Eingabe" onBlur="PruefeEingabe(this.value)"
</form>
</body></html>
Das Ereignis onChange eignet sich zum Überwachen von Eingabeelementen. Es tritt ein, sobald sich der Inhalt eines Textfeldes oder einer Auswahlliste ändert.
Beispiel:
<html> <head> <title>OnChange</title> </head>
<body>
<form>
Eingabe: <input name="Eingabe"
value="253668" onChange="alert(Eingabe.value)"
</form>
</body> </html>
Die beiden Ereignisse onClick und onDblClick unterstützen
die gleichen Elemente. Sie treten mit einem Klick bzw. Doppelklick auf
ein Element auf. Daher eignen sich beide Ereignisse zum Auslösen von
Aktionen des Benutzers.
Unterstützt werden folgende Elemente:
Checkboxen, Radiobuttons, Verweise, Reset- und Submit-Schaltflächen
Beispiel:
<html> <head> <title>OnClick</title> </head>
<script language="JavaScript">
var i=0;
Baumliste=new Array("Eiche","Erle","Kastanie","Birke","Buche",Esche");
function naechsterBaum()
{
document.Formular1.Baum.value=Baumliste[i];
i++
if (i==Baumliste.length) i=0;
}
</script>
<body>
<form name="Formular1">
Baum: <input name="Baum">
<input type="button" value="Auswahl"
onClick="naechsterBaum()"
</form>
</body> </html>
Mit dem Anklicken oder Aktivieren eines Elements durch Betätigen der Tabulatortaste tritt das Ereignis onFocus ein.
Für den Benutzer wird dieser Zustand sichtbar,
indem entweder der Cursor in dem Element sichtbar wird (z.B. Textfelder),
das Element eine Schattierung oder einen neuen Rahmen erhält oder
eine andere Hintergrundfarbe eingesetzt wird.
Deshalb wird dieses Ereignis oft mit onClick verwechselt.
Unterstützt werden folgende Elemente:
Fenster, Frames und Elemente eines Formulars
Beispiel:
<html> <head> <title>onFocus</title> </head>
<body>
Geben Sie in die Textfelder neuen Text ein!<br>
Der alte Inhalt wird beim Anklicken gelöscht.<br>
<form name="Formular1">
<input type="text" name="Feld1" value="Milch"
onFocus='this.value="" '<br>
<input type="text" name="Feld2" value="Butter"
onFocus='this.value="" '<br>
</form>
</body> </html>
Dieses Ereignis tritt beim erfolgreichen Öffnen einer
HTML-Datei ein.
Unterstützt werden folgende Elemente: Dokument, Frame
Beispiel:
<html> <head> <title>onLoad</title> </head>
<body onLoad="alert('Willkommen()')"
</body></html>
Man benötigt diese Ereignisse meistens dann gemeinsam,
wenn die damit veränderten Zustände von Elementen wieder aktualisiert
werden sollen z.B. beim Bilderwechsel
Unterstützt werden folgende Elemente:
Verweise, Grafiken
Beispiel:
<html> <head> <title>onMouseover</title>
</head>
<body>
<center> <h1> Versuche, mich zu fassen!</h1>
<a onMouseover="alert('Hast Du gedacht, ich habe etwas zu verschenken???')" >
<img src="money.gif" border="0"></a>
</body> </html>
Beispiel:
<html> <head> <title>onUnload</title> </head>
<body onUnload="alert ('Auf Wiedersehen!')"
</body> </html>