OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Beginn der Lobpreisung

1. Die Abschnitte

• Einführung
• Vorbereitung
• Initialisierung
• Beginn der Lobpreisung
• Die weiteren Schritte
• Das Ende
• Fazit

2. Die Methode startGlorification

... ist zunächst mal nichts Weltbewegendes. Über die Referenzen des Literals data nehmen wir an den beiden Links "Start" und "Überschrift" ein paar einfache CSS-Modifikationen vor, um den "aktiven" Punkt zu markieren.

function startGlorification ()
{
  data.start.style.background    = '#fff'; 
  data.start.style.color         = '#000'; 
  data.headline.style.background = '#dadada';
}

3. Event-Listener entfernen

Die Methode startGlorification dient nur als Auslöser für die folgenden Aktionen. Sie wird also nach einem Klick auf "Start" nicht mehr benötigt. Und um zu verhindern, dass da jemand noch mal drauf klickt und alles vorne losgeht, entfernen wir den Event-Listener.

function startGlorification ()
{
  ...
  that.removeHandler(data.start, 'click', startGlorification);
}

4. Event-Listener setzen

Damit nun die Lobpreisung ihren Gang nimmt, müssen wir einen Event-Listener auf den Link "Überschrift" legen. Dabei weisen wir die Methode moveForward zu, zu der ich erst im nächstenAbschnitt komme. Allerdings wollen wir der diesmal einen Parameter mitgeben. Kein Problem, denkt man sich und arbeitet einfach mit einer anonymen Funktion.

function startGlorification ()
{
  ...
  that.addHandler (data.headline, 'click', function()
    {
      moveForward(0),
    }
  );
}

Aber!

Da in diesem Tutorial pro Klick eine Methode nur einmal(!) ausgeführt werden soll, muss der Event-Listener danach sofort entfernt werden. Nun könnte man auf die Idee kommen, das in der zukünftigen Methode moveForward zu machen. Also ähnlich wie bei startGlorification. Leider funktioniert das nicht, wenn man vorher mit einer anonymen Funktion gearbeitet hat. Allerdings gibt es für diesen speziellen Fall eine Lösung. Mag sie auch noch so krude sein.

5. Event-Listener wieder entfernen

Bitte fragt mich nicht nach den Details. Die habe ich zu diesem Zeitpunkt auch noch nicht komplett ausbaldowert. Hauptsache es funktioniert. Will man also nach dem ersten Klick auf ein HTML-Element den Event-Listener entfernen, so hilft der folgende Code.

that.addHandler (data.headline, 'click', function()
  {
    moveForward(0),
    that.removeHandler (data.headline, 'click', arguments.callee);
  }
);

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