JavaScript: 9.3 Event-Handler als Objekteigenschaften

< blät tern >

9.3 Event-Handler als Objekteigenschaften

Neben der Möglichkeit, Event-Handler als Attribute eines HTML-Tags zu notieren, existiert seit Version 3 des Netscape Navigators, d.h. seit Erscheinen von JavaScript 1.1, eine weitere Vorgehensweise – die Notation als Objekteigenschaft.

Ein Beispiel:

<html> 
  <head> 
    <title>Eventhandler</title>
    <script type="text/javascript"> 
      function welcome() { 
        alert("Willkommen"); 
      }  
 
      window.onload = welcome; 
 
    </script> 
  </head> 
  <body> 
  </body> 
</html>

Wir haben im oben abgebildeten Beispiel eine Funktion definiert, um die eher einfache Hinweismeldung zu erzeugen. Die Notation von Event-Handlern als Objekteigenschaft unterscheidet sich nämlich von der bereits vorgestellten Variante und anderen Konstrukten in JavaScript:

1. Zum einen akzeptiert diese Notation nur Funktionen und zum anderen werden diese nicht wie in HTML-Attributwerten üblich aufgerufen, sondern nur als Referenz angeben. Deshalb finden Sie hinter dem Funktionsnamen auch nicht die sonst üblichen Klammern.

2. Eine weitere Besonderheit in diesem Zusammenhang ist die Notation des Event-Handlers. In JavaScript selbst spielt ja die Groß-/Kleinschreibung von Namen durchaus eine Rolle – im Gegensatz zu den nicht case-sensitive ausgewerteten HTML-Attributnamen. Daher muss man den Namen des Event-Handlers in JavaScript grundsätzlich klein schreiben. Der Name der Funktion muss natürlich genau so geschrieben werden wie in der Funktionsdefinition.

3. Weiterhin müssen Sie die Ausführungsreihenfolge des Skriptes in Beziehung zum aktivierenden HTML-Element beachten:
Das HTML-Element muss definiert sein, bevor man dem Element einen Event-Handler zuweisen kann.

Das erste der folgenden zwei Beispiele ruft eine Fehlermeldung hervor, weil diese letzte Regel missachtet wurde. Das Formular gibt es noch nicht, wenn der Inhalt des script-Elements ausgeführt wird. Im zweiten Beispiel wird die richtige Reihenfolge eingehalten.

Beispielskript

<html>
  <head>
    <title>Eventhandler</title>
    <script type="text/javascript">
      function reminder() {
        alert("Beachten Sie unsere Urheberhinweise");
      }
      document.formular.feld.onselect = reminder;
    </script>
  </head>
  <body>
    <form name="formular">
      <textarea rows="4" cols="40" name="feld">
        Das ist ein Text, 
        den Sie nicht markieren sollten!
      </textarea>
    </form>
  </body>
</html>

Ansehen

Beispielskript

<html>
  <head>
    <title>Eventhandler</title>
    <script type="text/javascript">
      function reminder() {
        alert("Beachten Sie unsere Urheberhinweise");
      }
    </script>
  </head>
  <body>
    <form name="formular">
      <textarea rows="4" cols="40" name="feld">
        Das ist ein Text, 
        den Sie nicht markieren sollten!
      </textarea>
    </form>
    <script type="text/javascript">
      document.formular.feld.onselect = reminder;
        //wird aufgerufen, wenn der Text im Textfeld markiert wird.
                                           
    </script>
  </body>
</html>

Ansehen

Im zweiten Beispiel haben wir die Deklaration der Funktion trotzdem im head-Bereich der Datei belassen. Wie Sie sich vielleicht erinnern können, wird der head-Bereich immer erst vollständig geladen, bevor die Darstellung der HTML-Elemente im body-Bereich beginnt. Es kann also nicht passieren, dass die Funktion bereits vom Event-Handler benötigt wird, ohne dass sie zuvor definiert wurde.

Diese Benutzung von Event-Handlern als Objekteigenschaften ist in mehrerlei Hinsicht vorteilhaft. Zum einen ist die Attribut-Notation nur lesbar, nicht jedoch veränderbar. Die Notation als Eigenschaft eines Objekts lässt sich beliebig im Programm neu zuweisen. Sie könnten also sogar dem Benutzer die Freiheit geben, zu bestimmen, wie ein Mausklick ausgewertet werden soll.

Die nachfolgende Tabelle führt auszugsweise auf, welchen Objekten Event-Handler zugewiesen werden können. In den verschiedenen Browsern gibt es darüber hinaus noch weitere Event-Handler, für die Microsoft und Netscape leider unterschiedliche Namen verwenden. Sie finden diese in den jeweiligen Dokumentationen von Microsoft bzw. Netscape.
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp bzw. http://www.mozilla.org/docs/dom/domref/).

Objekt	Event-Handler als Eigenschaft
`window`	`onblur` `onerror` `onfocus` `onload`	`onmousemove` `onresize` `onscroll` `onunload`
`document`	`onblur` `onclick` `onfocus` `onkeydown` `onkeypress` `onkeyup` `onmousemove`
`image`	`onabort` `onclick` `onerror` `onload`
`form`	`onreset` `onsubmit`
`text, textarea, password`	`onblur` `onchange` `onfocus` `onselect`
`button, reset, submit, radio, checkbox`	`onclick`
`select`	`onblur` `onchange` `onfocus`
Alle anderen HTML-Elemente	`onblur` `onclick` `onfocus`

Weitere Möglichkeiten (Internet Explorer)

Die bisher vorgestellten Wege, auf Events zu reagieren, sind browserkompatibel, das heißt, sie funktionieren sowohl beim Internet Explorer, als auch beim Netscape Navigator.

Der Internet Explorer bietet noch eine weitere Möglichkeit, Event-Handler zu notieren: die ausdrücklichen Event-Handler-Skripte. Diese Skripte kommen in Ihrer Gesamtheit nur dann zur Ausführung, wenn das darin definierte Event ausgelöst wird.

Beispielskript

<script type="text/javascript" event="onclick" 
        for="document"> 
 
alert("Hallo, diese Meldung erscheint nur," 
    + "weil Sie den Mausbutton gedrückt haben!");
 
</script>

Ansehen

Bei anderen Browsern und dem Internet Explorer vor Version 4 erscheint diese Meldung, sobald Sie das Dokument laden, d.h. die Angaben in den Attributen event und for werden nicht beachtet. In der Praxis wird diese Variante aus Gründen der Kompatibilität kaum eingesetzt.

Übung 9.3:
Probieren Sie alle Event-Handler der Objekte window und document einmal aus. Z.B. geben Sie bei jedem Ereignis eine alert()-Box mit dem Namen des Ereignisses aus. Aber Vorsicht bei MouseMove – dieses Ereignis tritt praktisch ständig auf.

Übung 9.4:
Schauen Sie in den Dokumentationen nach. Auf welche Ereignisse kann das Objekt window im Netscape-Browser und Internet Explorer jeweils zusätzlich reagieren?

< blät tern >