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);
}
);
Erläuterung
Da ich mich noch nicht allen Einzelheiten beschäftigt habe, sei erst mal nur folgender Hinweis gestattet. arguments.callee
stellt einfach gesagt einen Verweis auf die gerade ausgeführte Funktion/Methode dar. Und damit kann man den Event-Listener entfernen.
Ein Tipp
Um das zu überprüfen, baut einfach mal die Methode moveForward
mit einem dummen alert
in die Konstruktorfunktion
Glorification
ein und schaut, was dann passiert. Wer dazu Fragen hat, schicke mir einfach eine
Mail.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt