Event-Handler sind Elemente in JavaScript, die als HTML-Attribute verwendet werden. Diese speziellen Attribute fragen ein Event (Ereignis) ab und führen eine Funktion oder einen Funktionsaufruf aus. Ein Ereignis kann zum Beispiel ein Mausklick oder ein Tastendruck des Internetnutzers sein.
Ein HTML-Element, welches einen Event-Handler enthält, reagiert auf das jeweilige Ereignis, sofern dies im Anzeigebereich des jeweiligen HTML-Elements stattfindet.
Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Beispiel Event-Handler</title> <script> Function klick() { Alert('Hallo Welt!'); } </script> </head> <body> <input type="submit" onClick="klick()"; value="klick mich" /> </body> </html> |
Erklärung:
Nun erscheint ein Button, wie man ihn aus den Kontaktformularen kennt, mit der Aufschrift „klick mich“. In dem Input-Tag ist nun das onClick-Attribut mit dem Funktionsaufruf der Funktion „klick“ hinterlegt.
Klickt nun jemand auf den Button, wird die im Head stehende Funktion ausgeführt und es erscheint ein Browserfenster mit der Meldung „Hallo Welt!“.
Auflistung:
Natürlich gibt es nicht nur das onClick-Attribut, sondern glücklicherweise ein paar mehr. Um dies ein wenig übersichtlicher zu gestalten, habe ich dir hier eine kleine Liste zusammengestellt.
Event-Handler | Aktion für Auslösung |
onClick | Klick auf ein Element |
ondblclick | Doppelklick auf das Element |
onkeydown | Bei einem Tastendruck |
onkeypress | Beim Gedrück halten einer Taste |
onkeyup | Beim Drücken und loslassen einer Taste |
onmousedown | Beim Drücken einer Maustaste |
onmousemove | Beim Bewegen der Maus |
onmouseout | Beim Wegbewegen der Maus von dem Element |
onmouseup | Beim Drücken und loslassen einer Maustaste |
onmouseover | Beim Drüberfahren der Maus über das Element |