Eine Webseite interaktiv zu gestalten, bedeutet, auf die Aktivitäten des Benutzers zu reagieren. Ein typisches Beispiel ist das Auswerten eines HTML-Formulars. JavaScript ermöglicht dabei das Abfangen von fehlerhaften Eingaben, bevor der Formularinhalt an den Webserver geschickt wird. Dies hilft unnötigen Datentransfer im Internet zu vermeiden, die Server nicht durch Fehleingaben zu belasten und dem Benutzer Wartezeiten zu ersparen. Andere Aktivitäten sind z. B. vom Benutzer ausgeführte Mausbewegungen und -klicks. Diese können verschiedene Operationen auslösen, z. B. das Starten eines Countdowns, das Öffnen weiterer Fenster oder die Anzeige versteckter Grafiken.

Im Document-Object-Modell (DOM) besitzen viele HTML-Objekte neben Eigenschaften und Methoden auch Ereignisse (engl.: events), auf die der Browser mit der Ausführung von JavaScript-Anweisungen reagieren kann. Dazu wird ein sogenannter Event-Handler als Attribut im zugehörigen HTML-Tag definiert. Meist wird eine JavaScript-Funktion, die im Kopf des Dokuments definiert wurde, als Aktion des Event-Handlers genutzt. Browser, die JavaScript nicht unterstützen, ignorieren dieses Attribut.

Auf Ereignisse reagieren

JavaScript-Anweisungen werden oft sofort nach dem Laden einer Webseite ausgeführt. Die Anweisungen einer Funktion werden jedoch nicht sofort aufgerufen, sondern erst nach einem Aufruf der Funktion abgearbeitet. Der Anwender entscheidet, wann die Berechnung gestartet wird, beispielsweise wenn er eine Schaltfläche mit der Bezeichnung Berechnung starten betätigt.

JavaScript stellt uns zahlreiche Ereignisse zur Verfügung. Tritt ein bestimmtes Ereignis ein, wird die angegebene Funktion aufgerufen und die enthaltenen Anweisungen werden abgearbeitet.

Die am häufigsten verwendete Abfrage ist, ob mit der Maus auf ein bestimmtes Element, z.B. eine Schaltfläche, geklickt wurde.

Beispiel: onClick.html

Im folgenden Beispiel wird die Funktion meidung() aufgerufen, sobald der Anwender die Schaltfläche Hier klicken betätigt.

onClick.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Ereignisse in JavaScript</title>
  <script type="text/javascript">
    function meldung()
    {
      alert("Sie haben auf die Schaltfläche geklickt. ");
    }
  </script>
</head>
<body>
  <h3>Auf das Ereignis <i>onClick</i> reagieren</h3>
 
  <form action="">
    <input type="button" value="Hier klicken" onClick="meldung()">
  </form>
</body>
</html>

Es gibt noch eine Vielzahl anderer Ereignisse, bei denen Sie eine bestimmte Funktion aufrufen können. Die Bezeichnungen der Ereignisse können beliebig groß- oder kleingeschrieben werden, da es sich nicht um JavaScript-Code handelt. Beachten Sie, dass die Browser diese Ereignisse nicht im gleichen Umfang in allen HTML-Tags unterstützen.

Eine Webseite laden und verlassen

Die Event-Handler onLoad und onUnload werden innerhalb des <body>- oder <frameset>-Tags definiert. Die Ereignisse werden ausgelöst, sobald die Webseite geladen oder verlassen wird.

Die Ereignisse eignen sich deshalb, um Besucher zu begrüßen oder beim Verlassen der Webseite eine Umfrageseite einzublenden. Das Ereignis onLoad wird ebenfalls in vielen Webseiten eingesetzt, um Werbefenster einzublenden.

Beispiel: onLoad_onUnload.html

Beim Laden wird ein Begrüßungsfenster angezeigt. Wenn Sie die Webseite über den enthaltenen Link verlassen, wird ebenfalls ein Meldungsfenster zur Verabschiedung geöffnet.

onLoad_onUnload.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Ereignisabfragen: onLoad und onUnload</title>
  <script type="text/javascript">
    function meldung1()
    {
      alert("Ereignis: OnLoad\nHerzlich willkommen auf meiner Webseite!");
    }
 
    function meldung2()
    {
       alert("Ereignis: OnUnload\nSie wollen schon gehen? Vielen Dank für Ihren Besuch...");
    }
  </script>
</head>
<body onLoad="meldung1()" onUnLoad="meldung2()">
  <h3>Mehrere Ereignisabfragen</h3>
  <p>Im &lt;body&gt; sind die Ereignisse OnLoad und OnUnload definiert.<br>
 
  <a href="weiterleitung.html">Verlassen Sie die Seite</a>, um das Ereignis OnUnLoad auszuführen.
</body>
</html>

Ereignisse bei Grafiken, Links und Ankern

Die folgenden Event-Handler können Sie in Bildern, Links und Ankern verwenden.

Die Event-Handler onAbort und onError werden in Verbindung mit Grafiken benutzt. Sie werden innerhalb des Tags <img> gesetzt und sorgen dafür, dass beim misslungenen Laden einer Grafikdatei dem Benutzer eine Meldung angezeigt wird. Das Ereignis Abort tritt ein, wenn der Benutzer das Laden einer Grafik unterbricht. Das Ereignis onError wird ausgelöst, wenn die im HTML-Dokument angegebene Grafik vom Browser nicht geladen werden kann.

Der Browser Firefox setzt den Event-Handler onError nicht um und kann damit nicht auf das fehlerhafte Laden von Grafiken reagieren.

Der Event-Handler onciick kann für Links und Grafiken definiert werden und wird ausgelöst, wenn der Benutzer auf einen Link oder eine Grafik klickt.

Die Event-Handler onMouseOut und onMouseOver reagieren auf Ereignisse, die durch Bewegung mit der Maus ausgelöst werden. Ein onMouseOver-Ereignis tritt ein, sobald sich die Maus über dem festgelegten HTML-Element befindet. Beim Verlassen eines Elements tritt das onMouseOut-Ereignis ein.

Das Haupteinsatzgebiet der beiden Ereignisse onMouseOut und onMouseOver ist die gemeinsame Verwendung bei einem Rollover-Effekt. Rollover bedeutet, dass eine Grafik sich in dem Moment ändert, in dem die Maus über sie fährt. Verlässt die Maus die Grafik, kehrt die Grafik zur ursprünglichen Anzeige zurück. Diesen Effekt finden wir in den Navigationen vieler Webseiten.

Beispiel: onMouse_onError.html

Das Beispiel zeigt, wie Sie einen einfachen Rollover-Effekt erzeugen. Zunächst müssen Sie zwei gleichgroße Grafiken anfertigen, die dann gegeneinander ausgetauscht werden sollen.

onMouse_onError.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Ereignisabfragen: onMouseOver, onMouseOut, onError</title>
  <script type="text/javascript">
      var grafik = new Array;
      grafik[0] = new Image;
      grafik[0].src = "images/bild1.jpg";
      grafik[1] = new Image;
      grafik[1].src = "images/bild_2.jpg";
 
      function Bildwechsel(nummer)
      {
        document.images[0].src = grafik[nummer].src;
      }
 
      function Grafikfehler()
      {
        alert("Fehler! Die Grafik kann nicht geladen werden.");
      }
  </script>
</head>
<body>
  <h3>onMouseOver, onMouseOut, onError</h3>
  <a href="#" onMouseover="Bildwechsel(1)" onMouseout="Bildwechsel(0)"><img
     src="images/bild1.jpg" width="100" height="75" border="0" alt="Grafikwechsel" onError="Grafikfehler()"></a>
</body>
</html>

Ereignisse im Formular

Beispiel: form_events.html

In diesem Beispiel wird ein Formular mit zwei Eingabefeldern für den Namen und den Vornamen erzeugt. Beim Auftreten der Ereignisse onFocus, onBlur und onChange wird eine Meldung in der Statusleiste oder ein Meldungsfenster angezeigt.

form_events.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Events im Formular</title>
</head>
<body>
  <form action="">
    <p>Vorname:<br>
    <input name="vorname" size="50" maxlength="70" type="text"
       onFocus = "window.status='Bitte geben Sie Ihren Vornamen ein.';"
       onBlur = "window.status='';"
       onChange = "alert(this.value + ' ist ja ein netter Name!');">
    <p>Nachname:<br>
 
    <input name="name" size="50" maxlength="70" type="text"
       onFocus = "window.status='Bitte geben Sie Ihren Nachnamen ein.';"
       onBlur = "window.status='';"
       onChange = "alert(this.value + ' klingt aber ungew&ouml;hnlich...');">
  </form>
</body>
</html>

Event-Handler ''onClick''

Die Eingabefelder eines Formulars lassen sich im Zusammenhang mit Event-Handlern auch für andere Zwecke nutzen. Beispielsweise können die Werte der Formularfelder nach dem Betätigen einer Schaltfläche als Eingabe einer Berechnung dienen, deren Ergebnis wiederum in einem anderen Formularfeld ausgegeben wird.

Beispiel: volumen_rechner.html

Dieses Beispiel zeigt Ihnen, wie wir nach der Eingabe eines Wertes und der Auswahl einer Maßeinheit die Umrechnungen in andere Maßeinheiten durchführen und die Werte ausgeben.

volumen_rechner.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Event: onClick</title>
  <script type="text/javascript">
      function umrechnen()
      {
        var menge = document.Volumen.eingabewert.value;
        switch (document.Volumen.einheit.options.selectedIndex)
        {
          case 0: tausender = 1; break;
          case 1: tausender = 1000; break;
          case 2: tausender = 1000 * 1000; break;
          case 3: tausender = 1000 * 1000 * 1000; break;
          case 4: tausender = 1000 * 1000; break
          case 5: tausender = 1000 * 1000 * 100; break
        }
        document.Volumen.cmm.value = menge * tausender;
        document.Volumen.ccm.value = menge * tausender / 1000;
        document.Volumen.cdm.value = menge * tausender / 1000 / 1000;
        document.Volumen.cm.value  = menge * tausender / 1000 / 1000 / 1000;
        document.Volumen.liter.value = menge * tausender / 1000 / 1000;
        document.Volumen.hektoliter.value = menge * tausender / 1000 / 1000 / 100;
      }
  </script>
</head>
<body>
  <h3>Volumenma&szlig;e berechnen</h3>
  <form action="" name="Volumen">
 
    <p><input type="text" name="eingabewert" size="6" maxlength="5"><select name="einheit">
      <option value="cmm">mm&sup3;</option>
      <option value="ccm">cm&sup3;</option>
      <option value="cdm">dm&sup3;</option>
      <option value="cm">m&sup3;</option>
      <option value="l" selected>l (Liter)</option>
 
      <option value="hl">hl (Hektoliter)</option>
    </select>
    <p><input type="button" name="los" value="Umrechnen" onClick="umrechnen();">
    <p><input type="text" name="cmm" readonly> mm&sup3;
    <br><input type="text" name="ccm" readonly> cm&sup3;
    <br><input type="text" name="cdm" readonly> dm&sup3;
 
    <br><input type="text" name="cm" readonly> m&sup3;
    <br><input type="text" name="liter" readonly> l (Liter)
    <br><input type="text" name="hektoliter" readonly> hl (Hektoliter)
  </form>
</body>
</html>

Formulareingaben testen

Eine wesentliche Anwendung von JavaScript ist es, Formulardaten auf Fehleingaben zu prüfen, bevor sie über das Internet versendet werden. Über den Event-Handler onSubmit können wir vor dem Absenden der Daten auf die Inhalte des Formulars zugreifen. Somit ist schon eine Kontrolle der eingegebenen Daten auf dem Clientrechner möglich, um bei Fehleingaben das Versenden des Formulars zu verhindern.

Beispiel: kontaktfomular.html

Das folgende umfangreichere Beispiel zur Prüfung der Formulareingaben zeigt ein Anmeldeformular, das Adressdaten des Benutzers aufnehmen und versenden soll. Das zugrunde liegende Skript gibt bei der Eingabe Hilfestellungen in der Statuszeile, führt vor dem Versenden eine Überprüfung der Formularfelder durch und fragt nach, ob die Felder beim Betätigen der Schaltfläche Zurücksetzen auf die Vorgabewerte gesetzt werden sollen.

Außerdem sollen einige Eingabefelder auf korrekte Eingaben überprüft werden. Zum Beispiel dürfen die Telefonnummer und die Postleitzahl keine Buchstaben beinhalten.

Zuerst erstellen wir die Webseite mit den einzelnen Formularelementen. Im zweiten Schritt werden im Kopfbereich des HTML-Dokuments die JavaScript-Funktionen zum Auswertendes Formulars eingefügt.

kontaktfomular.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Formularauswertung</title>
  <script type="text/javascript">
      function testeZeichen (testString, erlaubteZeichen)
      {
        var allezeichenok = true;
        for (var i = 0; i < testString.length ; i++)
          if (erlaubteZeichen.indexOf(testString.charAt(i)) == -1)
             allezeichenok = false;
        return allezeichenok;
      }
 
      function testemailadresse(testString)
      {
        var suche = /^[\w\.\-]{2,}\@[äöüa-z0-9\-\.]{1,}\.[a-z]{2,4}$/i;
        return suche.test(testString);
      }
 
      function checkform(myform)
      {
        if (myform.name.value == "")
        {
          alert ("Bitte geben Sie Ihren Nachname an!");
          return false;
        }
        else if (myform.vorname.value == "")
        {
          alert ("Bitte geben Sie Ihren Vornamen an!");
          return false;
        }
        else if (myform.telefon.value == "")
        {
          alert ("Bitte geben sie Ihre Telefonnummer an!");
          return false;
        }
        else if (!testeZeichen(myform.telefon.value, "1234567890-/"))
        {
          alert ("Geben Sie für die Telefonnummer bitte nur Zahlen ein!");
          return false;
        }
        else if (myform.anschrift.value == "")
        {
          alert("Bitte geben Sie Ihre Anschrift an!");
          return false;
        }
        else if (myform.plz.value == "")
        {
          alert("Bitte geben sie Ihre Postleitzahl an!");
          return false;
        }
        else if (!testeZeichen (myform.plz.value, "1234567890"))
        {
          alert ("Geben Sie für die Postleitzahl bitte nur Zahlen ein!");
          return false;
        }
        else if (myform.plz.value.length != 5)
        {
          alert ("Fünf Stellen sollte die Postleitzahl schon haben!");
          return false;
        }
        else if (myform.ort.value == "")
        {
          alert ("Bitte geben Sie Ihren Wohnort an!");
          return false;
        }
        else if (myform.mail.value == "")
        {
          alert ("Bitte geben Sie Ihre E-Mail-Adresse an!");
          return false;
        }
        else if (!testemailadresse(myform.mail.value))
        {
          alert ("Die eingegebene E-Mail-Adresse ist nicht korrekt!");
          return false;
        }
        return confirm("Überprüfung abgeschlossen.\nMöchten Sie die Daten jetzt absenden?");
      }
      function checkreset(myform)
      {
        return confirm("Wollen Sie die Eingaben wirklich auf die Ausgangswerte zurücksetzen?");
      }
 
      function putstatus(mytext)
      {
        window.status = mytext;
      }
 
      function clearstatus()
      {
        window.status = "";
      }
  </script>
</head>
<body>
  <h3>Anmeldeformular</h3>
    <form name="anmeldeform" action="anmeldung.php" method="get" onSubmit="return checkform(this)" onReset="return checkreset(this)">
      <table summary="Formularelemente anordnen" width="500" cellspacing="0" cellpadding="5" border="0">
 
        <tr>
          <td width="100">Anrede</td>
          <td><input type="radio" name="anrede" value="Frau" checked>Frau
              <input type="radio" name="anrede" value="Herr">Herr</td>
        </tr>
        <tr>
          <td>Nachname:</td>
          <td><input name="name" size="50" maxlength="70" type="text"></td>
 
        </tr>
        <tr>
          <td>Vorname:</td>
          <td><input name="vorname" size="50" maxlength="70" type="text"></td>
        </tr>
        <tr>
          <td>Telefonnummer:</td>
          <td><input name="telefon" size="15" type="text" maxlength="15" onFocus="putstatus('Bitte geben Sie nur Zahlen ein.');" onBlur="clearstatus();"></td>
 
        </tr>
        <tr>
          <td>Stra&szlig;e</td>
          <td><input name="anschrift" size="50" maxlength="70" type="text" onFocus="putstatus('Bitte geben Sie die Stra&szlig;e und Hausnummer ein.');" onBlur="clearstatus();"></td>
        </tr>
        <tr>
           <td>Postleitzahl</td>
 
           <td><input name="plz" size="5" maxlength="5" type="text" onFocus="putstatus('Bitte geben Sie nur Zahlen ein.');" onBlur="clearstatus();"></td>
        </tr>
        <tr>
          <td>Ort</td>
          <td><input name="ort" size="50" maxlength="70" type="text"></td>
        </tr>
        <tr>
          <td>E-Mail-Adresse</td>
 
          <td><input name="mail" size="50" maxlength="50"></td>
        </tr>
      </table>
      <p>
        <input type="submit" value="Anmelden">
        <input type="reset" value="Zur&uuml;cksetzen">
      </p>
    </form>
</body>
</html>

JavaScript - Event-Handler