Event-Handler
Jetzt haben Sie sich bis hier her durchgequält, und bestimmt die Frage auf den Lippen: "Was mach ick jetzt mit dem Mist?". Sie können zwar jetzt schon ein paar nette kleine Programme basteln, aber nichts was mit der Internetseite interagiert. Dazu kommen wir jetzt. Die Schnittstelle von HTML und JavaScript, Interaktion von Nutzer und den Programmen.
Die sogenannten Event-Handler bemerken, wenn der Benutzer auf der Webseite etwas tut, zum Beispiel die Maus klickt. Das allein hilft noch nicht, aber diesen Event-Handlern sagt man auch, was passieren soll, wenn diese Aktion (Event) eintritt. In den meißten Fällen wird dann eine Funktion gestartet. Die Event-Handler können an beliebige TAGs gehangen werden. Das bedeutet, dass nur dann etwas passiert, wenn zum Beispiel auf dieses spezielle HTML-Elemente geklickt wird.
Schritt 1: Funktion wird benötigt
function tuwas() {
alert('Klick');
}
Schritt 2: Event-Handler an TAG hängen
<img src="klickmich.jpg" width="10" height="10" alt="Klick mich"
onclick="tuwas();" />
In diesem Beispiel, wird beim Klicken "onclick" des Bildes <img> die Funktion "tuwas()" ausgelöst. Sie sehen, dass die Event-Handler wie HTML-Optionen geschrieben werden.
Liste Event-Handler
onabort | bei Abbruch |
onblur | beim Verlassen |
onchange | bei erfolgter Änderung |
onclick | beim Klicken |
ondblclick | beim Doppelklick |
onerror | bei Fehlerfall |
onfocus | beim Aktivieren |
onkeydown | bei gedrückter Taste |
onkeypress | bei gedrückt gehaltener Taste |
onkeyup | bei losgelassener Taste |
onload | beim Laden der Datei |
onmousedown | bei gedrückter Maustaste |
onmousemove | bei weiterbewegter Maus |
onmouseout | Maus verläßt Element |
onmouseover | Maus schwebt über Element |
onmouseup | bei losgelassener Maustaste |
onreset | beim Zurücksetzen des Formulars |
onselect | beim Markieren von Text |
onsubmit | beim Abschicken des Formulars |
onunload | beim Verlassen der Datei |
Event-Handler für Links
Für Verknüpfungen <a> kann anstelle der eben erwähnten Event-Handler auch ein besonderer genutzt werden, welcher anstelle des Ziels "href" angegeben wird. Damit kann dann ebenfalls eine Funktion mit JavaScript ausgeführt werden.
<a href="javascript:tuwas();">Link</a>