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 bewegenonmouseout
Mauszeiger aus einem Element herausbewegenonmousemove
Mauszeiger bewegenonmousedown
Maustaste drückenonmouseup
Maustaste raufonclick
Maustaste klickenondblclick
Maustaste doppelklicken
4. Tastatur-Ereignisse
Bei der Eingabe per Tastatur haben wir deutlich weniger Möglichkeiten. Es sind dero dreien.
onkeydown
Taste drückenonkeyup
Taste loslassenonkeypress
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(!) geladenonunload
HTML-Seite wurde verlassenonabort
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 wirdonscroll
wenn ein Element mit der Maus gescrollt werden kannonblur
wenn ein zuvor aktiviertes Element verlassen wird
Formularereignisse
onsubmit
Formular abschickenonreset
Formular zurücksetzenonselect
Inhalt eines Formularelements mit der Maus markierenonchange
Ändern des Inhaltes eines select-Feldes