Event-Handler sind besonders sinnvoll bei Elementen, mit denen der Anwender in irgendeiner Form etwas tun kann. Zum Beispiel Hyperlinks, Formularelemente oder eingebettete Video- oder Audio-Player. Solche Elemente kann man im weiteren Sinne als interaktive Elemente verstehen. Das ist allerdings kein wirklich scharfer Begriff, denn letztlich kann in HTML5 jedes sichtbare Element interaktiv werden. Das nachfolgende Beispiel konzentriert sich auf Formularinhalte.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ereignisse bei interaktiven Elementen</title> <script> function hasContent(field_id, message_id) { if(document.getElementById(field_id).value.length == 0) { document.getElementById(message_id).style.display = "block"; document.getElementById(field_id).focus(); } } function hideMessage(message_id) { document.getElementById(message_id).style.display = "none"; } function prepareInput() { var toLower = document.getElementById('mail').value.toLowerCase(); document.getElementById('mail').value = toLower; return true; } </script> </head> <body> <form name="Test" action="index.php" onsubmit="return prepareInput();"> <p><label>Name:<br> <input type="text" name="name" id="name" onblur="hasContent('name', 'name_msg')" onchange="hideMessage('name_msg')"> </label><br><span id="name_msg" style="display: none"> Bitte geben Sie Ihren Namen ein!</span></p> <p><label>E-Mail:<br> <input type="text" name="mail" id="mail" onblur="hasContent('mail', 'mail_msg')" onchange="hideMessage('mail_msg')"> </label><br><span id="mail_msg" style="display: none"> Bitte geben Sie Ihre E-Mail-Adresse ein!</span></p> <p><input type="submit" value="Newsletter abonnieren"></p> </form> </body> </html>
Das Beispiel zeigt ein vollständiges HTML-Dokument. Der Kopfbereich enthält einen Scriptbereich mit JavaScript-Funktionen, die im Zusammenhang mit den verwendeten Event-Handlern benötigt werden. Der Dokumentkörper besteht aus einem Formular, wie es auf einer Seite stehen könnte, wo man einen Newsletter abonnieren kann. In zwei Eingabefeldern soll der Anwender seinen Namen und seine Mailadresse eingeben. Unterhalb jedes der beiden Eingabefelder ist jeweils ein span-Element notiert, das jedoch im Normalfall nicht sichtbar ist. Dafür sorgt die Stylesheet-Angabe style="display: none".
Die input-Elemente für die beiden Eingabefelder für Name und Mailadresse enthalten jeweils zwei Event-Handler: onblur und onchange. Das blur-Ereignis wird ausgelöst, wenn der Anwender ein interaktives Element, das zuvor den Fokus hatte, verlässt. Im Fall der input-Felder bedeutet das: wenn der Cursor sich zuletzt im Eingabefeld befand und der Anwender nun das Feld verlässt. Egal wie, also ob durch einen Klick woanders hin oder durch Weitergehen mit der Tabulator-Taste. Das change-Ereignis wird ausgelöst, sobald der Inhalt oder Wert des Elements sich ändert. Also beispielsweise, wenn der Anwender ein Zeichen eingibt, oder wenn er mit Maus und über Kontextmenü Inhalte aus der Zwischenablage in das Feld einfügt.
Dem Event-Handler onblur wird in beiden Eingabefeldern der Aufruf einer JavaScript-Funktion namens hasContent() zugewiesen. Der Funktion werden zwei Parameter übergeben, nämlich die id-Namen des Eingabefeldes und des unterhalb davon notierten span-Element mit dem verborgenen Inhalt. Die Funktion hasContent() ist im Scriptbereich im Dokumentkopf notiert. Sie prüft, ob die Anzahl der im Eingabefeld eingegebenen Zeichen 0 ist. Ist das der Fall, wird das verborgene span-Element auf sichtbar gesetzt. Der Anwender sieht also die Aufforderung wie z.B. Bitte geben Sie Ihren Namen ein! Außerdem wird der Cursor wieder in das Eingabefeld gesetzt. Sobald der Anwender dann ein Zeichen eingibt, wird der Event-Handler onchange ausgelöst. Er ruft die Funktion hideMessage() auf. Übergeben wird der id-Name des span-Elements mit dem Aufforderungstext. Die Funktion, ebenfalls im Dokumentkopf notiert, setzt den Aufforderungstext wieder auf unsichtbar.
Im einleitenden <form>-Tag des Beispiels ist noch ein weiterer Event-Handler notiert: onsubmit. Dieses Ereignis wird ausgelöst, wenn der Anwender das Formular mit Hilfe der Submit-Schaltfläche absendet. Der zugewiesene Scriptcode wird ausgeführt, bevor die beim action-Attribut angegebene URL-Adresse aufgerufen wird. Die URL-Adresse wird auch nur dann aufgerufen, wenn der ausgeführte JavaScript-Code am Ende den Wert true (wahr) zurückliefert. Gibt der Scriptcode false (falsch) zurück, wird das Absenden des Formulars verhindert. Deshalb wird der onsubmit-Handler gerne eingesetzt, um Formulareingaben vor dem Absenden auf Vollständigkeit und Plausibilität zu überprüfen. Im obigen Beispiel wird einfach nur die Eingabe aus dem Feld für die Mailadresse behandelt. Alle darin eingegebenen Großbuchstaben werden in Kleinbuchstaben umgewandelt. Das besorgt im Beispiel die Funktion prepareInput(), die bei onsubmit aufgerufen wird, und die ebenfalls im Dokumentkopf notiert ist.
Auch wenn es mit Hilfe von JavaScript möglich ist, Formulareingaben schon vor dem Formularversand auf Vollständigkeit und Plausibilität zu kontrollieren: verlassen Sie sich niemals darauf, dass nach dem Formularversand nur vollständige und ordentliche Daten am Server ankommen! Bei deaktiviertem JavaScript etwa können Anwender ein Formular ohne jede Kontrolle ausfüllen und absenden. Eine client-seitige Eingabekontrolle mittels JavaScript kann also keine serverseitige Überprüfung der Formulardaten ersetzen.
Es gibt weitere Event-Handler für interaktive Elemente, beispielsweise die neuen HTML5-Handler für video- und audio-Elemente (oncanplay, onplay, onplaying usw.). Details siehe Eventreferenz.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.