JavaScript

JavaScript Event-Handling – Wege aus der Hölle

Der Plan war so schön und die Überlegung so simpel: Ich nehme den Kalender von DHTML-Goodies und binde ihn ein paar Webapplikationen von mir ein. Das ganz soll natürlich automatisch, ohne den hässlichen Button aus den beispielen funktionieren. Ich brauche also eine Methode, die meine Datumsfelder automatisch erkennt und den Event-Handler dort anmeldet, damit sich der Kalender bei einem Klick auf das Feld öffnet.

Da ich eigentlich ein Freund der losen Kopplung bin wollte ich natürlich keine onclick Actions in die Formularfelder einbinden. Schließlich ist es durchaus im Rahmen des Denkbaren, dass mir der Kalender nach 3 Wochen nicht mehr gefällt und ich ihn austauschen muss oder will.

Dummerweise haben Internetexplorer und der Rest unterschiedliche Arten mittels Javascript Events an Felder zu koppeln.

Für Firefox sieht das ungefähr so aus:

element.addEventListener(‘click’,handleClickEvent,false);

Soweit so gut. Denn im DOM-Context bezieht sich beim methodenaufrauf der Zeiger “this” auf das angeklickte Objekt. Meine korrespondierende handleClickEvent Methode sieht wie folgt aus:

function handleClickEvent()
{
       displayCalendar(this,’dd.mm.yyyy’,this); 
}

Für den Kalendard heißt das, dass er sich an das angeklickte Objekt hängen soll. Blöd nur, dass weder das Hinzufügen, des Event-Listeners, noch der “this”-Pointer im InternetExplorer funktionieren. Glücklicherweise kennt JavaScript eine Art Exception-Handling die allem anschein nach in allen Browsern funktioniert. Erweitern wie die obere Zeile wie folgt:

try
{
      //Firefox W3C konform
      element.addEventListener('click',handleClickEvent,false);
}
catch(e)
{
      //IE Microsoft Event handling.
      element.attachEvent('onclick',handleClickEvent);
}

Jetzt haben wir eine Ausnahme für den IE hinzugefügt und müssen nur noch dafür sorgen, dass der Pointer in unserer handleClickEvenet Methode richtig funktioniert. Dies geschieht mit Hilfe einer Anpassung der handleClickEvent()-Methode, so dass diese wie folgt aussieht:

function handleClickEvent(event)
{
     var clickedElement = event.srcElement;
 
     if(!clickedElement)
    {
        clickedElement = this;
     }
     displayCalendar(clickedElement,'dd.mm.yyyy',clickedElement); 
}

Der Event-Parameter wird übrigens automatisch mitgegeben. Soviel zu den Grundmethoden. Jetzt wollten wir das ganze natürlich noch hübsch automatisieren, so dass die Datumsfelder automatisch erkannt werden und bei einem Klick auf diese auch der Kalender erscheint. Dafür brauchen wir nur eine kleine Methode Namens initCalendar() zu schreiben und diese über den onload-Evenent im Body einzubinden. Kern der automatisierung ist, dass wir alle Datumsfelder mit einer Vorsilbe in der ID versehen (“dt”). Wenn ein Feld also vorher die id “datum” hatte benennen wir es um in “dtDatum”.

function initCalendar()
{
  for(i=0; i<elements.length; i++)
  {
    setTooltipp(elements[i]);
    if(elements[i].id.indexOf("dt")==0)
    {
      try
      {
         //Firefox W3C konform
         elements[i].addEventListener('click',handleClickEvent,false);
      }
      catch(e)
     {
        //IE Microsoft Event handling.
        elements[i].attachEvent('onclick',handleClickEvent);
      }
    }
   }
}

Wenn man dieses vorgehen noch weiter generalisieren möchte, könnte es sich als ratsam erweisen anstelle der initCalendar() Mathode im onload des body-Tags eine Methode Namens initPage() aufzurufen. Init-Page würde dann sämtliche Initialisierungsmethoden enthalten.

© 2009 buildblog.