OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Vorbereitung

1. Die Abschnitte

2. Erfassung der wichtigen HTML-Elemente

Um uns später ein wenig Tipparbeit zu ersparen, legen wir in dem Literal die entsprechenden Referenzen an. Ich mache das hier nur mit zweien, um den Rest kümmert ihr euch mal schon selber. Nehmt dafür alle(!) HTML-Elemente, die eine ID haben. Oder klaubt euch das aus dem Lösungscode zusammen, wenn ihr zu faul dafür seid.


var data =
{
  start    : document.getElementById('start'),
  headline : document.getElementById('headline'),
  ...
}

3. Ein Helferlein

Wie ich euch bei der Theorie schon sagte, kocht der IE beim Event-Listening mal wieder ein Extrasüppchen. Gut, der 9er und höher kommt mittlerweile auch mit den korrekten Befehlen klar, aber wir müssen uns ja leider immer noch ein paar Gedanken über all die Leute machen, die von ihrem XP nicht lassen können und mit dem 8er in der Weltgeschichte herumsurfen. Angeblich soll der auch die offizielle Variante beherrschen, aber bei mir knallt es. Woran das liegt, kann ich im Moment auch noch nicht sagen.

Darum basteln wir uns zwei Methoden, um das entsprechend abzufangen. Weil ich euch später noch ein klein wenig über Prototyping zeigen werde, packen wir die in eine Konstruktorfunktion.


function Helper()
{
  this.addHandler = function (ele, handler, func)
  {   
    if (navigator.userAgent.match(/MSIE/))
    {
      ele.attachEvent('on' + handler, func);
    }
    else
    {
      ele.addEventListener(handler, func, false);
    }      
  }
  this.removeHandler = function (ele, handler, func)
  {      
    if (navigator.userAgent.match(/MSIE/))    
    {
      ele.detachEvent('on' + handler, func);
    }
    else
    {
      ele.removeEventListener(handler, func, false);
    }
  }
}

Erläuterung

Zunächst mal werden beide Methoden als öffentlich festgelegt werden, damit später auf sie zugegriffen werden kann. Der Rest ist eigentlich ziemlicher Pillepups. Als Parameter übergeben wir drei Werte, zuerst die Referenz auf das entsprechende HTML-Element (ele), dann den Event-Handler (handler) und zu guter Letzt die aufzurufende Funktion (func). Dann wird zunächst unterschieden, ob es sich um den IE oder andere Browser handelt. Und anschließend werden die Event-Listener hinzugefügt oder entfernt.

Da mit Sicherheit einige von euch mal wieder nicht die Theorie gelesen haben, weise ich noch auf zwei Besonderheiten hin. Der Internet Explorer 8 erwartet, dass der Event-Handler mit einem on beginnt. Darum nehmen wir hier eine einfache Zeichenkettenverknüpfung mit 'on' + handler. So wird dann zum Beispiel aus einem click ein onclick. Um den dritten Parameter beim Befehl removeEventListener könnt ihr übrigens ignorieren, da es für den IE 8 meines Wissens nach nichts Vergleichbares gibt. Darum steht der hier auch auf false. Macht euch also keine großen Gedanken darum weil das in der Realität im Moment noch keine Rolle spielt.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt