Eventhandler

Einführung

Event = Ereignis, d.h. Eventhandler = Ereignisbehandlung.
Für verschiedenste Ereignisse wie z.B. einen Mausklick oder einen Tastendruck gibt es in HTML-Seiten die Möglichkeit, hierauf direkt zu reagieren. Die Ereignisbehandlung wird vorwiegend dazu genutzt, um im Falle des Eintretens eines Ereignisses Javascript-Befehle auszuführen, z.B. eine eigene Funktion.
So gibt es z.B. den Ihnen bereits aus verschiedenen Anwendungen bekannten Eventhandler onclick, welcher z.B. genutzt werden kann beim Klick auf einen Button.
Abhängig von der verwendeten HTML-Version werden die Eventhandler manchmal unterschiedlich geschrieben, z.B. der Event Handler onclick in XHTML mit kleinem c und onClick in HTML4 mit grossem C.
Die Kleinschreibweise funktioniert auch in HTML4, ohne dass der Validator (validator.w3.org) einen Fehler anzeigt. Ich nutze daher konsequent in allen meinen Beispielen die Schreibweise aus XHTML, d.h. alle Buchstaben immer klein.

Die meistverwendeten Eventhandler stelle ich in den folgenden Kapiteln vor. Hier finden Sie erst einmal eine kurze Übersicht ohne Nutzungsbeispiele:

onblur - tritt beim Verlassen eines Objektes auf.
onchange - ändert sich der Wert eines Eingabefeldes tritt dieses Ereignis ein.
onclick - ein Objekt wird angeklickt.
onfocus - ein Objekt wird aktiviert.
onload - nach dem Laden eines Objektes. Z.B.: <body... onload="..."> startet eine Funktion nach dem Laden der Seite.
onmouseout - das Objekt wird von der Maus verlassen.
onmouseover - das Objekt wird mit der Maus überfahren.
onselect - es wird etwas markiert.
onsubmit - das Ereignis tritt beim Absenden eines Formulars ein und wird benötigt im Zusammenspiel mit einem Server, welcher die Daten übernimmt.
onerror - tritt ein, falls z.B. ein Dateiladefehler aufgetreten ist.
onunload - das Ereignis tritt beim Beenden einer Seite ein.
onresize - das Ereignis tritt ein beim Verändern der Größe des aktuellen Browserfensters (siehe Beispiel auf Seite "Tipps+Tricks")
onkeydown - das Ereignis tritt ein beim Drücken einer Taste

onclick

Beispiel 1 - Klicken eines Buttons:
<!-- Ein Button, welcher eine Funktion aufruft -->
<input
   type="button"
   value="Klick mich"
   onclick="hiergehtslos()"
>
oder ein Div-Bereich, welcher nach Anklicken verschwindet:
<div onclick="this.style.visibility = 'hidden'; return false;">
  Klick mich und ich bin weg
</div>

onchange

Beispiel - Ändern eines Textfeldes:
...
  <textarea
    rows="10"
    cols="20"
    onchange="alert(this.value)"
  >
   Verändern Sie bitte mal diesen Text hier
   und klicken Sie dann anschliessend woanders hin!
  </textarea>
...

onblur

Beispiel aus SelfHTML - Beim Verlassen eines Elements wie z.B. eines Textfeldes kann man eine Prüfung der Eingabe mit dem Eventhandler onblur() starten.
Der Übergabewert this.value steht in dem Funktionsaufruf Pruefe(this.value) für den Eingabewert in diesem Feld.
// HTML-Formular im <body> der Seite:
 
<form name="Test" action="">
  Name:
  <input
    type="text"
    name="Eingabe"
    onblur="Pruefe(this.value)">
</form>
 
// Zugehöriges Script:
 
<script type="text/javascript">
 
  // document.Test.Eingabe.focus();  ggf. Setzen beim Laden der Seite
  function Pruefe(Feld)
  {
    if (Feld == "")  // keine Eingabe bzw. Feld gelöscht
    {
      alert("Das Namensfeld muss einen Inhalt haben!");
      document.Test.Eingabe.focus();
      return false;  // keine Eingabe
    }
    else
      return true;   // Eingabe o.k.
  }
 
</script>

onmouseover, onmouseout

Das Überfahren eines Bereiches in der HTML-Seite kann man feststellen und ggf. eine passende Funktion daraufhin programmieren. Im folgenden Beispiel wird einfach nur sofort ein Text im Ausgabefeld selbst ausgegeben ('this' steht immer für das Element selbst):
...
<h1
  id="Ausgabefeld"
  onmouseover = "this.innerHTML = 'Was gibt es?'"
  onmouseout  = "this.innerHTML = 'Cool was?'"
>
  Ich bin ein dynamisches Ausgabefeld. :-)
</h1>
...

onunload

Beispiel - Hiermit kann z.B. das vorzeitige Verlassen der Seite verhindert werden, wenn z.B. ein Formular noch nicht fertig ausgefüllt wurde. Aber auch beliebigen Unfug kann man mit diesem Eventhandler veranstalten. So könnte man den Nutzer dazu zwingen, auf dieser Webseite zu bleiben. In der Regel führt dieses dann beim Nutzer irgendwann zu einem Neustart des Browsers und Ihre Seite wird nie wieder besucht.
<body onunload="verlassen_der_seite_pruefen()">
 
  <h1>halli hallo</h1>
 
</body>

onfocus

Beispiel: Sobald der Cursor in ein vorbelegtes Eingabefeld gesetzt wird, kann mit onfocus die Vorbelegung gelöscht werden. In diesem Fall müsste dann also das Formular den Namen formularname und das Eingabfeld den Namen passwortfeld haben.
    <input type="text"
           name="passwortfeld"
           value="Passwort"
           onfocus="document.formularname.textfeldname.value=''"
    >
bzw. - da das Eingabetextfeld sich selbst kennt, kann man die Anweisung auch kürzer schreiben:
 onfocus="this.value=''"

onkeydown / onkeyup

Beispiel: Beim Drücken der ENTER-Taste erwartet der Internet-Nutzer eine Reaktion. Diese Reaktion müssen Sie oft als Programmierer selbst programmieren.

Ein vollständiges funktionierendes Beispiel einer Eingabebehandlung für RETURN/ENTER- und DEL/ENTF-Taste finden Sie hier:
Download
Es können leicht weitere Tastatureingaben hinzufgefügt werden.

Hinweis:
a) Die zur Verfügung gestellte Skript-Datei enthält eine anonyme Funktion, welche auf gedrückte Tasten reagiert. Sie kann direkt in Ihre HTML-Seite eingebunden werden via:
<script language="javascript"
        type="text/javascript"
        src="onkeydown.js"></script>
language und type sind vollständigerweise aufgeführt, damit kein Browser damit ein Problem hat, dieses Skript zu laden.

b) Wenn die Eingabe einer Zahl benötigt wird, dann macht es Sinn, diese Eingabe sofort zu prüfen. Sie fügen dem Eingabeelement einfach einen onkeyup-Eventhandler hinzu. Ein replace-Befehl ersetzt alle Eingaben, welche keine Zahlen sind mit '' (nichts/kein Zeichen/leere Zeichenkette):
onkeyup="this.value=this.value.replace(/\D/,'')"

javascript:

Dieses ist nicht wirklich ein Eventhandler, sondern nur die schnellste Möglichkeit Javascript-Funktionen direkt aufzurufen. Das folgende Beispiel kann man nutzen, um Funktionen aus einem Link heraus aufzurufen.
<a href="javascript: meineFunktion()">
  Funktionsaufruf von meineFunktion()
</a>
Ein weiteres Beispiel zur Nutzung: Es macht Sinn, den Cursor nach dem Laden einer Seite gleich auf das erste Eingabefeld zu setzen. Das kann man z. B. wie folgt tun:
...
  function setFocus()
  {
    document.formname.feldname.focus();
  }
...
 
<body onload="javascript:setFocus()">
...

Ein weiteres Beispiel mit zwei Eventhandlern in Form einer kompletten verifizierten und funktionierenden HTML-Seite

<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>JavaScript - Beispiel</title>
  <meta charset="utf-8">
 
  <style>
 
    body
    {
      font-family:      verdana;
      font-size:        14px;
      text-align:       center;
    }
 
  </style>
 
  <script type="text/javascript">
 
    function printout(t)
    {
      document.rahmen.text1.value=t;
    }
 
  </script>
 
</head>
 
 
<body>
 
  <h1>Event</h1>
 
  <!-- Im folgenden Formular gibt es ein Textfeld, welches
       durch das Anklicken des darunter stehenden Buttons
       gelöscht werden kann -->
 
  <form name="rahmen" action="">
    <input
      type="text"
      name="text1"
      size=10>
    <p>
    <input
      type="button"
      name="schalter1"
      value="L&ouml;schen"
      onclick="document.rahmen.text1.value=' ' ">
  </form>
 
  <p>
 
  <!-- wenn man mit der Maus über den folgenden Link fährt, dann wird
       die Funktion printout() mit dem Parameter 'Hallo!' gerufen.
       Printout fügt den Text im Textfeld des obigen Formulars neu ein,
       falls er gelöscht wurde -->
 
  <a
    href="nirgendwohin"
    onmouseover="printout('Hallo!')">
    Ein normaler Link!
  </a>
 
 
</body>
 
</html>

Tastatur-Eingaben abfangen

Manchmal ist es notwendig, auf Tastatureingaben zu reagieren. Das folgende Beispiel demonstriert, wie man z.B. die ENTER-Taste abfangen kann:
// Behandlung der ENTER-Taste
document.onkeydown = function(event)
{
  if(event.keyCode == 13)
  {
    event.preventDefault();
    // Hier könnte z.B. die eigene Behandlung des Drückens der ENTER-Taste folgen,
    // z.B. Aufruf einer eigenen Funktion
  }
  return event.returnValue;
}

Aufgaben

  1. Erstelle ein Formular, in das der Anwender seinen Namen eingeben soll. Sobald der Name eingegeben wurde, wird die Eingabe geprüft und bei vorhandener Eingabe der Nutzer mit seinem Namen begrüßt, z.B. mit einem alert("Hallo "+name).
  2. Erstelle ein Formular mit 2 Textfeldern in das der Anwender seinen Namen und sein Passwort eingeben kann. Gebe dann Namen und Passwort aus, sobald die Eingabe erfolgt ist, z.B. alert( "Hallo "+ name + ", das Passwort lautet " + pw );
    Setze den Fokus automatisch auf das "Name"-Feld zurück, wenn keine Eingabe erfolgt ist. Die Eingabe des Passworts ist nur möglich, wenn zuvor etwas im "Name"-Feld eingegeben wurde.
  3. Erweitern Sie das von Ihnen bereits erstellte Bestellformular um passende Eventhandler, welche Eingabeprüfungen immer sofort vornehmen, sobald ein Feld geändert wurde.
  4. ...

Links


Weitere interessante Links für Fortgeschrittene:

Verschiedene gelöste Schüler-Probleme

Übergabe von 2 Parametern an eine von einem Eventhandler gerufene Funktion:
  <img id="theImg" src="off.png"
       onMouseOver=maus("on.png","bla")
       onMouseOut=maus("off.png","nanu")
       alt="" />
 
  <!-- Platzhalter für Ausgabe -->
  <div id="ausgabefeld"></div>

function maus(myImg, text)
{
      document.getElementById('theImg').src=myImg;
      document.getElementById("ausgabefeld").innerHTML = text;
}