4.2    Klassische Ereignisbehandlung

Wie bereits erläutert, ist die klassische Ereignisbehandlung Bestandteil vieler bewährter Programme. In diesem Abschnitt sehen Sie einige Beispiele mit vielen häufig genutzten Eventhandlern.

4.2.1    Erste Eventhandler

Es folgt ein erstes Beispielprogramm mit drei Schaltflächen und einem Hyperlink (siehe Abbildung 4.1) sowie den Eventhandlern onclick und onload und dem Protokoll javascript:, das ähnliche Aufgaben erfüllen kann.

Ereignisse bei Schaltfläche, Hyperlink und Dokument

Abbildung 4.1    Ereignisse bei Schaltfläche, Hyperlink und Dokument

Zunächst der zweite Teil des Programms, mit den HTML-Elementen und den Eventhandlern:

...
<body onload="geladen();">
   <p><input type="button" value="Schaltfläche 1"
         onclick="geklickt('Schaltfläche 1');">
      <input type="button" value="Schaltfläche 2"
         onclick="geklickt(this.value);">
      <input type="button" value="Neues Dokument" onclick="neu();"></p>
   <p><a href="javascript:geklickt('Hyperlink');">Hier steht ein Hyperlink</a></p>
</body></html>

Listing 4.1    Datei »event_click.htm«, HTML und Eventhandler

Das Dokument enthält drei Schaltflächen. Dabei handelt es sich eigentlich um Formularelemente. Falls diese nicht zum Absenden von Formularinhalten, sondern nur zum Auslösen von Aktionen innerhalb des Dokuments führen sollen so wie in diesem Dokument, müssen sie nicht innerhalb eines form-Containers stehen. Unterhalb der Schaltflächen steht ein Hyperlink. Es werden drei Eventhandler genutzt:

Innerhalb einer Zeichenkette steht nach dem Eventhandler jeweils der Aufruf einer Funktion. Diese Funktion kann Parameter haben. Damit können Sie mit einer einzigen Funktion auf unterschiedliche Events reagieren.

Bei der Schreibweise unterscheidet sich das Protokoll javascript: wiederum: Es steht mit dem Funktionsaufruf innerhalb der Zeichenkette.

Bei Aufruf der Funktion geklickt() wird jeweils eine Zeichenkette als Parameter übergeben, hier zum Zweck der Demonstration auf unterschiedliche Weise:

Es folgt der erste Teil des Programms, mit den JavaScript-Funktionen, die mithilfe der Eventhandler aufgerufen werden:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Erste Eventhandler</title>
   <script>
      function geladen()
      {
         alert("Dokument wurde geladen");
      }

      function geklickt(bezeichnung)
      {
         alert("Geklickt: " + bezeichnung);
      }

      function neu()
      {
         document.open();
         document.write("<!DOCTYPE html><html><head><meta charset='utf-8'>"
            + "<title>Neu</title></head><body>Neu</body></html>");
         document.close();
      }
   </script>
</head>
...

Listing 4.2    Datei »event_click.htm«, JavaScript-Funktionen

Es gibt drei Funktionen, die aufgrund von Ereignissen aufgerufen werden:

Ereignisbehandlung zu »onload«

Abbildung 4.2    Ereignisbehandlung zu »onload«

Ereignisbehandlung zu »onclick«, bei »Schaltfläche 2«

Abbildung 4.3    Ereignisbehandlung zu »onclick«, bei »Schaltfläche 2«

Neues Dokument

Abbildung 4.4    Neues Dokument

Falls Sie in einem bereits geladenen Dokument die Methode document.write() aufrufen, wird das Dokument mit einem neuen Dokument überschrieben. Dies kann ein gewünschter Effekt zur Erzeugung von dynamischen Inhalten sein … oder eine unliebsame Überraschung.

4.2.2    Formulare und Ajax

Ab dem nächsten Abschnitt werden wir uns auch mit Formularen beschäftigen. Diese dienen bekanntlich dem Senden von Daten an einen Webserver. Ein wichtiges Einsatzgebiet von JavaScript ist die Prüfung (Validierung) der Inhalte eines Formulars.

Nach dem Senden der Daten an den Webserver werden sie dort mithilfe eines zweiten Programms verarbeitet und gespeichert. Außerdem wird eine Antwort zurückgesendet. Ein solches Programm kann z. B. in der Programmiersprache PHP geschrieben werden.

Den meisten Beispielen in diesem Buch, die Formulare enthalten, habe ich ein kurzes Antwortprogramm in PHP beigefügt, mit dessen Hilfe der Empfang der Daten bestätigt wird. Keine Angst, Sie müssen jetzt nicht auch noch PHP erlernen. Es geht nur um die Vorführung eines realistischen Ablaufs nach dem Senden eines Formulars. Die PHP-Dateien finden Sie zusammen mit den anderen Beispieldateien im Downloadpaket zum Buch.

Später – in Kapitel 8 – werden Sie etwas über die Ajax-Technologie erfahren. Hier werden einzelne Teile einer Seite geändert, indem ebenfalls Daten von einem Webserver abgerufen werden.

Für die Beispielprogramme mit Formularen bzw. Ajax haben Sie nun drei Möglichkeiten:

4.2.3    Ereignisse im Formular

Es folgt ein Beispielprogramm mit Formularelementen und Eventhandlern. Diese ermöglichen Ihnen eine Reaktion auf die typischen Ereignisse, die auftreten, während ein Benutzer ein Formular ausfüllt.

In Abbildung 4.5 sehen Sie am unteren Ende ein zusätzliches einzeiliges Textfeld, in dem Informationen angezeigt werden, sobald die einzelnen Ereignisse ausgelöst werden. Es sind bereits einige Eintragungen vorhanden. Als Letztes erfolgte ein Eintrag im Bemerkungsfeld.

Formular mit Elementen

Abbildung 4.5    Formular mit Elementen

Nach dem Absenden erfolgt zunächst eine Rückfrage, siehe Abbildung 4.6.

Rückfrage nach dem Absenden

Abbildung 4.6    Rückfrage nach dem Absenden

Sie haben drei verschiedene Möglichkeiten, die Datei mit dem Formular aufzurufen, siehe auch Abschnitt 4.2.2, »Formulare und Ajax«:

Die richtige Antwort des PHP-Programms vom lokalen Webserver sehen Sie in Abbildung 4.7.

Antwort vom lokalen Webserver

Abbildung 4.7    Antwort vom lokalen Webserver

Zwei Hinweise zum Thema PHP

Zunächst der zweite Teil des Programms mit den HTML-Elementen und den Eventhandlern:

...
<body>
   <form name="f" method="post" action="event_form.php"
         onsubmit="return senden();" onreset="return ruecksetzen();">
      <p><input name="anrede" type="radio" value="Herr"
         onclick="wechsel(this);" checked="checked"> Herr
         <input name="anrede" type="radio" value="Frau"
         onclick="wechsel(this);"> Frau</p>
      <p><input name="nachname" size="20" onchange="wechsel(this);"> Nachname</p>
      <p><input name="vorname" size="20" onkeyup="aenderung(this);"> Vorname</p>
      <p><input name="reise" type="checkbox" value="Hinflug"
         onclick="markiert(this);"> nur Hinflug</p>
      <p><select name="land" onchange="wechsel(this);">
         <option value="I" selected="selected">Italien</option>
         <option value="S">Spanien</option>
         <option value="P">Portugal</option></select> Land</p>
      <p><textarea name="bemerkung" rows="3" cols="20"
         onchange="wechsel(this);">Kommentar</textarea> Bemerkung</p>
      <p><input type="submit"><input type="reset"></p>
      <p><input name="kontrolle" size="50" readonly="readonly"> Kontrolle</p>
   </form>
</body></html>

Listing 4.3    Datei »event_form.htm«, HTML und Eventhandler

Das Formular verfügt über das Attribut name. Dies ermöglicht Ihnen, mit JavaScript auf das Formular und seine Elemente zuzugreifen und z. B. die Ausgaben in dem Kontrollfeld am Ende des Formulars zu vorzunehmen. Die Attribute method und action benötigen Sie für die Übermittlung an das PHP-Programm auf dem Webserver.

Die beiden Eventhandler onsubmit und onreset reagieren auf das Absenden bzw. Zurücksetzen des Formulars. Die beiden zugehörigen Funktionen senden() und ruecksetzen() liefern jeweils einen Wahrheitswert zurück, der die betreffende Aktion auslöst oder nicht auslöst.

Alle Formularelemente, deren Inhalt gesendet wird, verfügen über die Attribute name und value. Diese Attribute ermöglichen Ihnen, auf den Namen und den aktuellen Wert des betreffenden Elements mit JavaScript (und mit PHP) zuzugreifen. Mit den Attributen checked und selected legen Sie fest, welche CheckBox, welcher RadioButton oder welche Option eines Auswahlmenüs zu Beginn bereits markiert oder ausgewählt ist.

Bei den Formularelementen werden weitere Eventhandler genutzt:

An die Funktion wird als Parameter jeweils this übergeben, also der Verweis auf das aktuelle Objekt, zu dem das Ereignis ausgelöst wird. Damit haben Sie die Möglichkeit, innerhalb der Funktion auf Eigenschaften des Objekts zuzugreifen.

Es folgt der erste Teil des Programms, mit den JavaScript-Funktionen, die mithilfe der Eventhandler aufgerufen werden:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Ereignisse im Formular</title>
   <script>
      function wechsel(objekt)
      {
         document.f.kontrolle.value = objekt.name + ", "
            + objekt.value + ", Inhalt neu";
      }

      function aenderung(objekt)
      {
         document.f.kontrolle.value = objekt.name + ", "
            + objekt.value + ", Zeichen neu";
      }

      function markiert(objekt)
      {
         var ausgabe = objekt.name + ", " + objekt.value;
         if(objekt.checked)
            document.f.kontrolle.value = ausgabe + ", markiert";
         else
            document.f.kontrolle.value = ausgabe + ", nicht markiert";
      }

      function senden()
      {
         return confirm("Wollen Sie das Formular absenden?");
      }

      function ruecksetzen()
      {
         return confirm("Wollen Sie das Formular zurücksetzen?");
      }
   </script>
</head>
...

Listing 4.4    Datei »event_form.htm«, JavaScript-Funktionen

Auf das Element mit dem Namen kontrolle innerhalb des Formulars mit dem Namen f wird über document.f.kontrolle zugegriffen. Die Eigenschaft value enthält den Wert des Formularelements. Falls diese Eigenschaft einen neuen Wert erhält, erscheint dieser Wert im Formularfeld.

In den Funktion wechsel() und aenderung() werden die Eigenschaften name und value des HTML-Elements ausgegeben, zu dem das Ereignis ausgelöst wird. Sie haben die Möglichkeit, den Wert zu kontrollieren und z. B. den Benutzer über einen falschen Wert zu informieren.

Die Funktion markiert() wird nur für die CheckBox genutzt. Die Eigenschaft checked des Objekts liefert über einen Wahrheitswert die Information, ob der Klick die CheckBox markiert oder entmarkiert hat.

Die Funktionen senden() und ruecksetzen() liefern jeweils einen Wahrheitswert zurück, der die betreffende Aktion auslöst oder nicht auslöst. Dieser Wahrheitswert wird mithilfe der Methode confirm() erzeugt.

4.2.4    Maus-Ereignisse

Es gibt verschiedene Ereignisse, die aufgrund von Aktionen mit der Maus ausgelöst werden. Dies sind z. B.:

Im folgenden Beispiel sehen Sie vier verschiedene Bilder, zu denen die genannten Ereignisse ausgelöst werden. Darüber werden Informationen zu dem Ereignis und zu dem Objekt angezeigt, siehe Abbildung 4.8.

Maus-Ereignisse

Abbildung 4.8    Maus-Ereignisse

Das Programm:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Maus-Ereignisse</title>
   <script>
      function maus(objekt, ereignis)
      {
         document.f.kontrolle.value = "Ereignis: " + ereignis
            + ", Bild: " + objekt.src;
      }
   </script>
</head>
<body>
   <form name="f" action="#">
      <p><input size="70" name="kontrolle"></p>
   </form>
   <p><img src="im_paradies.jpg" alt="Paradies" onclick="maus(this, 'click');">
      <img src="im_sofi.jpg" alt="Sofi" onmouseover="maus(this, 'over');"
         onmouseout="maus(this, 'out');">
      <img src="im_welle.jpg" alt="Welle" onmousemove="maus(this, 'move');">
      <img src="im_winter.jpg" alt="Winter"
         onmousedown="maus(this, 'down');" onmouseup="maus(this, 'up');">
   </p>
</body></html>

Listing 4.5    Datei »event_maus.htm«

Bei jedem Ereignis wird die Funktion maus() aufgerufen. Als Parameter werden der Verweis this und eine Information zum Ereignis gesendet. Da es sich bei dem Objekt um ein Bild handelt, kann innerhalb der Funktion maus() die Eigenschaft src ausgewertet werden. Sie können einem HTML-Element mehrere Ereignisse zuordnen.

Der form-Container wird benötigt, damit das Formular einen Namen erhält, mit dessen Hilfe auf die Elemente zugegriffen werden kann. In Abschnitt 4.4, »Das Ereignisobjekt«, werde ich erläutern, wie Sie weitere Informationen zum Maus-Ereignis erhalten.