HTML/Eventhandler

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Event-Handler (Ereignisbehandler) sind HTML-Attribute, die eine Verknüpfung zu einer Script-Sprache (meist JavaScript) herstellen. Ein Ereignis ist zum Beispiel ein Mausklick, ein Tastendruck oder eine Wischbewegung auf einem Touch-Screen des Anwenders. Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler können Sie beispielsweise eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.


Inhaltsverzeichnis

[Bearbeiten] Allgemein

Standardmäßig wird Script in Event-Handlern als JavaScript interpretiert, andere Scriptsprachen wie z.B. VBScript wären aber genauso möglich. Sie müssen mit einer Angabe zur Default-Sprache für Scripts im Kopf der HTML-Datei deklariert werden:

Beispiel
<head> <meta http-equiv="content-script-type" content="text/VBScript"> <script language="VBScript"> <!-- ihr Script hier --> </script>

[Bearbeiten] Einbindung

Die Namen von Eventhandler-Attribute folgen einer festen Regel. Wenn ein Event im DOM den Namen ereignis hat, so lautet das entsprechende Attribut für HTML onereignis.

[Bearbeiten] Aufruf als Attribute

Eventhandler sind zwar Universal-Attribute, denn ihnen obliegt ein universell identisches Verhalten. Dennoch können einige Eventhandler-Attribute nur für bestimmte Elemente notiert werden. Das onload-Attribut ist nur im body-Element gültig. Das onclick-Attribut hingegen darf in fast jedem Element notiert werden. Hierbei gilt es jeweils zu beachten, dass Elemente wie Links zum Beispiel eine Default-Aktion innehaben.

Beispiel
… <form method="post"> <fieldset><legend>Feedback</legend> <label>Ihr Vorname: <input type="text" name="Vorname" onblur="testempty(this.value)" value=""> </label> <label>Ihr Nachname: <input type="text" name="Nachname" onblur="testempty(this.value)" value=""> </label> <label>Ihr Geburtsdatum: <input type="text" name="Gebursdatum" onclick="datepicker(this)" value=""> </label> <label>Ihre Meinung: <textarea cols="50" rows="5" name="Nachricht" onkeyup="checkmaxlength(this, 2000)"></textarea> </label> <button>Absenden</button> </fieldset> </form> … <script src="check_feedback_form.js"></script>
Vier Eventhandler-Attribute sind notiert.
  • Die ersten zwei reagieren auf das Verlassen des Feldes. Dabei wird die JavaScript-Funktion mit aufgerufen und als Parameter die Eigenschaft Value des aktuellen Elements übergeben. Das Stichwort this referenziert das Element, in welchem der Handler notiert ist.
  • Im dritten Feld wird auf ein Klick in das Feld hin eine Funktion aufgerufen, die ein Datum auswählen lässt. Hierbei wird nur die Element-Referenz durch this übergeben, damit die Funktion weiß, in welches Element es seine Ausgabe schreiben soll.
  • Im vierten Feld wird bei jedem Loslassen der Taste eine Funktion aufgerufen, welche die Länge der eingegebenen Nachricht überprüft. Es wird wieder die Element-Referenz und die Anzahl der maximal erlaubten Zeichen übergeben.
Die zugehörenden Funktionen stehen im importierten JavaScript-File.
Empfehlung:

Eventhandler sollte man in der Regel nicht im HTML selbst notieren, sondern mittels Javascript dynamisch an Elemente binden. Dies folgt der Tugend des unobtrusive JavaScript, denn nur aktiv JavaScript ausführende Browser sollen auch mit JavaScript-Code konfrontiert werden.

Auf der Seite JavaScript/DOM/Events finden Sie eine Übersicht und Beschreibung der einzelnen Events.

[Bearbeiten] Maskierung von JavaScript

Der Inhalt eines Eventhandler-Attributs steht im HTML-Kontext und muss als solcher korrekt behandelt werden.

Beispiel
<input type="text" name="age"
  onblur="
    if( this.value &amp;&amp; parseInt(this.value) &lt; 10 ){ 
      alert('Sie gehören aber ins Kindernet'); 
      this.focus(); 
    }"
  value="">
Im obigen Fall sind <-Zeichen als &lt; und && als &amp;&amp; korrekt zu maskieren.

Es ist auch darauf zu achten, dass Anführungszeichen korrekt verwendet werden. Sie können im obigen Fall die doppelten Anführungszeichen nur in maskierter Form &quot; verwenden.

Der gleiche Code in einem JavaScript Kontext würde sich wie folgt lesen:
if( this.value && parseInt(this.value) < 10 ){ 
   alert('Sie gehören aber ins Kindernet'); 
   this.focus();
}
Empfehlung: JavaScript-Code im HTML-Kontext wird schnell unlesbar. Verzichten Sie auf jeden Fall auf komplexe Ausdrücke. Am besten binden Sie Events dynamisch an Elemente.

[Bearbeiten] Empfehlung

Empfehlung:

Eventhandler sollte man in der Regel nicht im HTML selbst notieren, sondern mittels Javascript dynamisch an Elemente binden. Dies folgt der Tugend des Unobtrusive JavaScript, denn nur aktiv JavaScript ausführende Browser sollen auch mit JavaScript-Code konfrontiert werden.

Auf der Seite JavaScript/DOM/Event/Übersicht finden Sie eine Übersicht und Beschreibung der Events

[Bearbeiten] Quellen

[Bearbeiten] Siehe auch

[Bearbeiten] Weiterführende Links

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML