OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Alternative Event-Handler
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die Event-Handler
- Die Variablen
- Die Methoden im Detail
- Alternative Event-Handler
2. Das Problem
Wie ich hier schon unter Punkt 4 sagte, kann man mit der dort beschriebenen Vorgehensweise nicht mit einem
Array arbeiten, da zuerst die Schleife durchlaufen wird und beim später erfolgenden onmouseover die Werte nicht korrekt zur
Verfügung stehen. Denn leider handelt sich dabei nur um das letzte Array-Element. Weil halt die Schleife schon durchgelaufen
ist.
3. Die Lösung
Zunächst mal definiert man wie gehabt ein assoziatives Array mit den entsprechenden Werten. Auch wenn diese Aussage bei JavaScript nicht ganz korrekt ist.
var list = new Array ();
list['b_0'] = new Array ('m_0', 4, -84);
list['b_1'] = new Array ('m_1', 6, -144);
list['b_2'] = new Array ('m_2', 8, -204);
list['b_3'] = new Array ('m_3', 4, -84);
list['b_4'] = new Array ('m_4', 3, -54);
Die Event-Handler
... legt man genau so fest, wie es hier unter besagtem Punkt 4 beschrieben wurde.
for (i in list)
{
document.getElementById(i).onmouseover = function ()
{
...
}
}
Aber!
Diesmal ändern wir den Zugriff. Das Ergebnis sieht dann so aus.
document.getElementById(i).onmouseover = function ()
{
var id = this.id;
mymenue.menue(list[id][0], list[id][1], list[id][2]);
}
Erläuterung
Wichtig ist die lokale Variable var id. Denn sie beinhaltet die Referenz auf die ID des jeweiligen Elements. Damit ihr
das versteht, exerzieren wir das anhand des Menüpunktes "Computer" durch. Der Link hat das Attribut id mit dem Wert
b_1.
Bei einem onmouseover wird nun mit this eine Referenz auf das eigene Element erzeugt. this.id
enthält also den entsprechenden Attribut-Wert b_1. Und damit steuern wir das entsprechende Array-Element von
list an und bekommen die korrekten Werte.
4. Ein Hinweis
Im Lösungscode sind beide Varianten auskommentiert. Entfernt also einfach die entsprechenden Kommentarzeichen und die Sache läuft.
Hauptsache, ihr habt das Prinzip verstanden. Besonders die Sache mit dem this.