Information & Consulting

Im HTML-Code lassen sich verschiedene Aktionen für Elemente definieren. Häufig sollen Funktionen ausgelöst werden, wenn jemand auf das Element mit der Maus klickt oder Enter drückt, während sich der Cursor auf dem Element befindet. Dieses Ereignis wird mit dem Attribut »onclick« abgefangen. In HTML sieht der Code dazu so aus:

   <img src="grafik.png" onclick="aktion('grafik')">

Wenn die Elemente mit Hilfe von JavaScript und DOM erzeugt werden, wird ebenfalls das Attribut »onclick« verwendet und die Referenz auf eine Funktion zugewiesen:

   function img_click(e)
   {
     alert('img_click');
   }

   field.onclick = img_click;

wenn nicht für jede Aktion eine neue Funktion im JavaScript-Code geschrieben werden soll, verwendet man anonyme Funktionen. Der Code von oben läßt sich damit einfacher wie folgt schreiben:

   field.onclick = function (e) { alert('img_click'); };

Das ist besonders für solche Fälle praktisch, wenn viele aktive Elemente mit Hilfe des Document Object Models (DOM) in die Seite appliziert werden. Wenn die Funktion allerdings prinzipiell die gleiche ist, jedoch dynamisch andere Parameter enthalten soll, wird es schwierig. In diesem Beispiel soll ein Link mit JavaScript hinterlegt werden:

   if (pattern.exec(anchor.getAttribute('href'))) {
     anchor.onclick = function() { load_menu(RegExp.$1); };
   }

Dabei soll eine Funktion aufgerufen werden, die auf einen Teil der URL reagiert. Dazu wird der relevante Teil als Parameter in den Funktionsaufruf innerhalb der anonymen Funktion geschrieben. Syntaktisch ist das vollkommen richtig, semantisch jedoch kompletter Humbug, denn die Closures von JavaScript und die Art der Auswertung von Code spielen einen hier an die Wand.

Beim Bearbeiten des Klick-Ereignisses wertet JavaScript erst die Funktion aus und liest den Inhalt von »RegExp.$1«. Damit erhalten alle so modifizierten Links die gleiche Klick-Aktion. Die Verwendung von Variablen bringt an der Stelle auch nichts. Die einzige Lösung ist etwas gemogelt und liegt in der Einführung eines neuen Attributs.

Mit DOM können die Objekte beliebig modifiziert werden. Objekte, die Ereignisse enthalten und dadurch Funktionen triggern stehen in der Variable »this« zur Verfügung. Man muß allerdings aufpassen, denn »this« in einem anderen Kontext bedeutet nicht nur ein anderes Objekt sondern ggf. auch eine ganz andere Klasse.

In der Anonymen Funktion wird als Argument ein Attribut des Objekts »this« verwendet, das vorher angelegt wurde. In diesem Fall wird es »menutarget« genannt.

   if (pattern.exec(anchor.getAttribute('href'))) {
     anchor.menutarget
     anchor.onclick = function() { load_menu(this.menutarget); return false; };
   }

Auf diese Art und Weise lassen sich auch ganze Objekte verlinken und so den Event-Handlern zur Verfügung stellen. Als kleiner Kniff wird die Funktion zusätzlich mit logisch falsch beendet, was zur Folge hat, daß der Browser dem Link nicht folgt, der weiterhin im Attribut »href« steht.