Schon seit längerer Zeit können Browser Event-Handler durch Script-Anweisungen ein­binden. In der Anfangszeit war es üblich – und ist aus Gründen des besseren Verständ­nisses auch in diesem Buch so dargestellt –, dass JavaScript inline eingebunden wurde. Eben über die entsprechenden Event-Handler beim HTML-Element direkt.

Dies entspricht aber nicht der Vorgabe, Inhalt, Stil und Verhalten in einem Dokument strikt voneinander zu trennen. Erst die externe Bindung macht die Auszeichnung sauber, flexibel und portabel.

Durch die Attribute id, name bzw. class lässt sich jedes HTML-Element mit den Metho­den des DOM ansprechen und mit JavaScript manipulieren. Beispielsweise können alle Hyperlinks einer Seite in einem Array gespeichert werden:

var aTags = document.getElementsByTagName("a");

Elemente mit speziellen Eigenschaften ermitteln

Mit der Methode test() können auch verschiedene spezielle Elemente des Arrays gefil­tert werden. Diese Methode erwartet am Anfang einen regulären Ausdruck und prüft diesen gegen einen übergebenen String.

Beispiel

var aTags = document.getElementsByTagName("a");
var aTagsClass = new Array();
for (var i = 0; i < aTags.length; i++) {
  if (/external/.test(aTags[i].className)) {
    aTagsClass[] = aTags[i];
  }
}

Erläuterung

Im vorhergehenden Beispiel werden alle a-Elemente einer Seite in einem Array aTags gespeichert. Danach wird ein leeres Array angelegt, um die zu suchenden Elemente speichern zu können. Nun wird mit einer for-Schleife das Array aTags durchgegangen. Sobald ein Element das Attribut class="external" besitzt, wird es als Element dem Array aTagsClass hinzugefügt.

Event-Handler im Skript anmelden

Bis jetzt wurden die Event-Handler direkt im HTML-Markup notiert, wie in diesem Beispiel zu sehen:

<div id="message" onclick="changeColor();">
  //sehr viel Informationen
</div>

Durch die Technik des unaufdringlichen Programmierens werden die Handler nun direkt im Kopfbereich einer Webseite notiert. Natürlich können diese Notierungen auch in eine externe JavaScript-Datei ausgelagert werden, welche in der Folge mit dem link-Element eingebunden wird. Dies ist sozusagen die Königsdisziplin. Durch eine Auslage­rung aller Stile und JavaScripts in externe Dateien sind in einer HTML-Datei nur noch Inhalt und semantische Markups zu finden. Der Rest wird über link-Elemente einge­fügt. Durch den Einsatz des rel-Attributs kann auch noch genau und semantisch defi­niert werden, welche Funktionen diese externen Dateien besitzen.

Beispiel

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Unobtrusive Programming</title>
    <style>
      div#message {
        margin: 20px; 
        padding: 16px;
        background-color: silver; 
      }
    </style>
    <script>
      function changeColor(evtHandler) {
        this.setAttribute('style', 'background: orange');
      }
    </script>
  </head>
  <body>
    <h1>Testen von Unobtrusive Programming</h1>
    <div id="message">
      <p>Klick mich und ich werde orange!</p>
    </div>
    <script>
      document.getElementById("message").onclick = changeColor;
    </script>
  </body>
</html>

Erläuterung

Zugegeben, das Markup ist nicht sehr elegant, aber es erfüllt seinen Zweck. Im Kopf­bereich des Dokuments wird ein style-Element eingesetzt, um das div-Element des Dokument­körpers zu formatieren. Darauf folgt ein script-Element, um eine Funktion für das Ändern der Hintergrundfarbe des div-Elements zu erzeugen. Die Funktion changeColor besitzt einen Übergabeparameter (evtHandler), nämlich das Event selbst. Damit können Sie in der Folge feststellen, welches Event die Funktion ausgelöst hat.

Im body-Element ist ein einfacher Markup mit einem h1-Element und einem div-Element notiert. Das div-Element muss das Attribut id besitzen, damit Sie es über das DOM ansprechen können. Dies erfolgt im script-Element am Ende des Dokumentkör­pers. Hier ermitteln Sie das div-Element mit der Methode getElementById(). Als Über­gabeparameter ist der Wert des id-Attributs notiert. Achten Sie darauf, dass JavaScript Groß- und Kleinschreibung unterscheidet. In der Folge werden der Event-Handler onclick und die Funktion changeColor() zugewiesen. Hier ist zu beachten, dass die Funktion nur mit ihrem eigentlichen Namen geschrieben wird, ohne Klammern und Parameter. Der Event-Handler onclick muss in Kleinbuchstaben notiert werden.

Die Technik, mit zwei script-Elementen zu arbeiten, ist notwendig, da der HTML-Parser eines Browsers das Dokument sequentiell abarbeitet. Würden Sie den Event-Handler bereits im head-Element ansprechen, würde der Parser das Element mit id="message" noch nicht kennen, denn es wird erst viel später geparst. Daher notieren Sie die Zuordnung erst am Ende des body-Elements, denn jetzt wurden alle Elemente geparst und sind im DOM bekannt.

Diese Art des Markups ist natürlich noch kein Idealzustand, da die Scripts jetzt noch mehr in der HTML-Seite verteilt sind. Mit einem zusätzlichen Event-Handler des DOMs kann aber eine Verbesserung und komplette Zusammenfassung erzielt werden. In der Folge können Sie mit dieser Technik auch das vollständige Script in eine externe Datei auslagern.

Beispiel

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Unobtrusive Programming</title>
    <style>
      div#message {
        margin: 20px; 
        padding: 16px;
        background-color: silver; 
      }
    </style>
    <script>
      function changeColor(evtHandler) {
        this.setAttribute('style', 'background: orange');
      }
      window.onload = function() {
        document.getElementById("message").onclick = changeColor;
      }
    </script>
  </head>
  <body>
    <h1>Testen von Unobtrusive Programming</h1>
    <div id="message">
      <p>Klick mich und ich werde orange!</p>
    </div>
  </body>
</html>

Erläuterung

Bei dem obigen Beispiel wurde das zweite script-Element ersatzlos gelöscht. Dafür wurde im script-Bereich des head-Elements der Event-Handler onload verwendet. Dies ist ein Event des window-Objekts und wird ausgelöst, sobald die gesamt HTML-Datei geladen und geparst wurde. Dadurch sind auch alle Elemente im DOM registriert und können verwendet werden.

In diesem Fall wurde eine anonyme Funktion verwendet – eine JavaScript-Funktion ohne Namen. Da nur der Event-Handler onclick registriert werden soll, ist dies eine übliche Technik, denn die Funktion selbst ist sehr kurz. Sollen jedoch mehrere Aktionen durchgeführt werden, sollten Sie eine eigene Funktion (z. B. mit dem Namen init()) erstellen und diese dem Event-Handler zuweisen.

JavaScript- und DOM-Übersicht < | > HTML und XHTML

 

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.