Wenn man über einen Link auf einer Webseite fährt, hat man einen sogenannten Mouseover-Effekt erzielt, der zum Ausdruck bringt, dass die Maus den gültigen Bereich des Links berührt oder überfahren hat. Dieser Effekt kann auch als Event, als Ereignis bezeichnet werden und die Steuerung führt zum Ausdruck Event-Handler.
In Javascript gibt es eine ganze Reihe solcher Ereignisse, die zum Ausdruck Event-Handler geführt haben. Damit wird Javascript signalisiert, dass eine Aktivität stattgefunden hat oder noch immer stattfindet und Javascript prüft daraufhin, ob etwas zu tun ist und wenn ja, was. Daraus ergeben sich dynamische Prozesse, die das statische HTML nicht in seinen Möglichkeiten aufweist.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Allerdings sind manche dieser Event-Handler in der Zwischenzeit fast schon überholt, obschon sie nach wie vor häufig eingesetzt werden, weil es Alternativen gibt. Der klassische Event-Handler, den wohl die meisten als erstes ausprobiert haben und nach wie vor ausprobieren, ist der schon angesprochene Mouseover-Effekt. Diesen kann man mittlerweile auch mit CSS lösen und daher ist die Bedeutung deutlich zurückgegangen.
Es gibt auch Event-Handler, die mittlerweile eher abgelaufen sind, wie jener von onAbort. Damit konnte Javascript früher gesteuert werden, wenn jemand das Laden eines Bildes abgebrochen hatte. Das ist insofern kaum mehr ein Thema, als die Bilder und andere Elemente der Webseiten durch das Breitband-Internet schneller geladen sind, als jemand abbrechen könnte.
onmouseover
Mit diesem Event-Handler kann man einen Link mit zusätzlichen Funktionen ausstatten. Wenn man im Link nicht nur den Titel, sondern auch diese Javascript-Funktion nutzt, wäre es möglich, für Dynamik zu sorgen - etwa eine veränderte Linkfarbe, die Veränderung der Farbe auf der ganzen Seite oder auch eine Meldung an den Besucher.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
onmouseout
Das ist das Gegenteil, denn dieser Event-Handler reagiert, wenn man den Bereich eines Links verlassen hat. In Javascript wurde dieser oft genutzt, um eine Meldung an den Besucher zu schicken wie etwa "Sie haben den Link verlassen".
onclick
Mit onclick hat man Links lange Zeit so ausgestattet, dass daraufhin etwa ein neues Fenster entstanden ist oder man hat auf der Seite selbst Veränderungen durchführen können. Da Popup nicht mehr gewünscht ist und viele dynamische Lösungen auch eher kritisch gesehen sind, ist die Lösung nicht mehr so ganz aktuell, doch ganz stimmt das nicht. Klickt man nämlich auf eine Schaltfläche eines sozialen Netzwerkes, dann öffnet sich ein Fenster, um die Seite zu teilen und das ist nichts anders als die lange Jahre genutzte Funktion mit onclick.
onchange
Mit onchange kann man bei der Formularüberprüfung arbeiten. Wenn ein Formularfeld mit onchange bestückt ist, wird erkannt, wenn die Eingabe erfolgt ist und damit konnte eine Formularprüfung erreicht werden. Das funktioniert nach wie vor sehr gut, aber man nutzt trotzdem lieber die Version mit PHP-Überprüfung, weil dies für Sehbehinderte leichter nachvollziehbar ist.
onblur
Dieser Event-Handler wurde seltener genutzt. Er war dann zuständig, wenn man ein Formularfeld verlässt und dieses nicht mehr aktiv ist. Dann konnte man eine Meldung an den Besucher schicken, aber sehr oft wurde diese Lösung nicht angestrebt.
onfocus
Das Gegenteil ist onfocus, das dann Gültigkeit hat, wenn ein Formularfeld aktiv wurde, also man mit der Maus in das Feld klickt. Das kann man nutzen, um etwa einen Eingabehinweis damit zu verknüpfen wie "bitte nur Zahlen eingeben".
In der Anfangszeit des Webdesign hat man mit den Event-Handlern Dynamik entstehen lassen können, die mit dem reinen HTML nicht möglich war. In der Zwischenzeit überprüft man die Formulareingaben mit PHP, wenngleich nicht so dynamisch, weil man erst das Formular abschicken muss. Es ist aber eine sicherere Variante als mit Javascript und daher die Version, die auf professionellen Seiten bevorzugt wird.
Manches wie das Teilen auf sozialen Netzwerken wird mit einer Technik durchgeführt, die mit onclick vergleichbar ist. Die anderen Event-Handler haben stark an Bedeutung verloren.
Ein wesentlicher Vorteil bei diversen Effekten mit Javascript ist die Tatsache, dass man das aktuelle Fenster und/oder Dokument direkt ansprechen kann. Mit dem Fenster-Objekt kann man festlegen, ob es sich in der Größe verändern darf, beim Dokument-Objekt kann man die Hintergrundfarbe ändern oder andere Daten abrufen.
Weitere Möglichkeiten gibt es mit den Event-Handler. Das sind die berühmten Funktionen rund um Links, wie der Mouseover-Effekt, aber auch bei Formularfeldern gibt es Möglichkeiten. Einige dieser Optionen sind aber durch CSS schon abgelöst worden. Eine andere Variante ist die umfangreiche Bibliothek jQuery, mit der mittels AJAX auch PHP-Abfragen von Datenbanken gelingen, ohne die Seite neu laden zu müssen.
Themenseiten
Artikel-Thema: Javascript Event-Handler einsetzen
Beschreibung: Mit den 🎨 Event-Handlern kann man in Javascript für Dynamik sorgen wie etwa beim ✅ Überfahren des Links oder beim Aktivieren eines Formularfeldes.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel