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>