JavaScript - Grundlagen - Event-Handler

1. Begriffsbestimmung

Ein Event ist ein Ereignis und ein Handler ist etwas, das dieses Ereignis kontrolliert. Bei jedweder Software versteht man darunter Aktionen des Benutzers. Und wie kann der den Ablauf eines Programms beeinflussen? Genau, mit so genannten Eingabegeräten. Da haben wir zum Beispiel die Maus oder auch Tastatur. All die möglichen Ereignisse werden dabei vom Browser permanent überwacht. Und wenn eine entsprechende Aktion auf eines der folgenden Events zutrifft, reagiert er entsprechend.

Zuweisung

Die Events kann man auf zweierlei Art und Weise festlegen. Wie ich schon beim Thema Einbindung gesagt habe, kann man diese Events direkt im jeweiligen HTML-Tag aufrufen.


<input type="text" name="bla" onclick="alert('hallo');" />

Allerdings geht das auch deutlich komfortabler, aber das ist doch eher eine Sache für Fortgeschrittene. Darum komme ich dazu auch erst sehr viel später.

2. Schreibweise

Die ist abhängig von der ausgewählten DOCTYPE-Definition. Wenn man sich für eine HTML-Variante entschieden hat, so kann(!) man die "klassische" Schreibweise benutzen


onMouseDown

während man bei XHTML alles klein schreiben muss. Aus Tippfaulheit (und weil ich nur noch mit XHTML arbeite) benutze ich daher immer diese Schreibweise.


onmousedown

3. Maus-Ereignisse

Was glaubt ihr, wie viele Möglichkeiten ihr habt, um mit der Maus ein wie auch immer geartetes Programm zu steuern? Es sind etliche. JavaScript stellt uns aber nicht alle zur Verfügung, die möglich sind, sondern nur einige. Dabei handelt es sich um die folgenden Varianten.

onmouseover Mauszeiger in ein Element bewegen
onmouseout Mauszeiger aus einem Element herausbewegen
onmousemove Mauszeiger bewegen
onmousedown Maustaste drücken
onmouseup Maustaste rauf
onclick Maustaste klicken
ondblclick Maustaste doppelklicken

4. Tastatur-Ereignisse

Bei der Eingabe per Tastatur haben wir deutlich weniger Möglichkeiten. Es sind dero dreien.

onkeydown Taste drücken
onkeyup Taste loslassen
onkeypress Taste gedrückt halten

5. Weitere Ereignisse

Neben den oben beschriebenen stellt uns JavaScript noch Internet-spezifische Ereignisse zur Verfügung. Dabei muss man zwischen den drei folgenden Möglichkeiten unterscheiden

Globale Ereignisse

Diese Form von Events tritt immer in Kraft, wenn es sich auf eine komplette Seite bezieht. Daher werden sie eigentlich immer dem <body>-Tag zugeordnet.

onload HTML-Seite wurde komplett(!) geladen
onunload HTML-Seite wurde verlassen
onabort das Laden der HTML-Seite wurde abgebrochen

Allgemeine Ereignisse

Sie können sowohl global über <body> angelegt werden, als auch dezidiert für einzelne Elemente.

onfocus wenn ein Element aktiviert wird
onscroll wenn ein Element mit der Maus gescrollt werden kann
onblur wenn ein zuvor aktiviertes Element verlassen wird

Formularereignisse

onsubmit Formular abschicken
onreset Formular zurücksetzen
onselect Inhalt eines Formularelements mit der Maus markieren
onchange Ändern des Inhaltes eines select-Feldes

zurück zum vorherigen Abschnitt weiter zum nächsten Kapitel