OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Die Event-Handler
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die Event-Handler
- Die Variablen
- Die Methoden im Detail
- Alternative Event-Handler
2. Das Prinzip
... solltet ihr mittlerweile begriffen haben. Man nimmt ein HTML-Element und legt dafür bei einem bestimmten Event eine anonyme
Funktion fest (siehe Einstiegstutorials document.testform.onsubmit = function ()). Diesmal haben wir aber mehrere
gleichartige Elemente, also müssen wir mit IDs arbeiten.
3. Die Event-Handler
Was jetzt kommt ist neu. Um euch nicht mit einen nahezu identischen Code zu langweilen, zeige ich euch nur einen Event-Handler. Die Restlichen solltet ihr eigentlich selber erstellen können.
document.getElementById('b_0').onmouseover = function ()
{
mymenue.menue('m_0', 4, -84);
}
Erläuterung
Hiermit müssen wir uns ein wenig genauer beschäftigen. Also, wir haben fünf Hauptmenüpunkte, deren IDs die ich aus Faulheit
einfach von b_0 bis b_5 durchnummeriert habe. In diesem Fall wird der Event bei einem
mouseover auf den Punkt "Home" ausgelöst. mymenue ist die im vorherigen Abschnitt erzeugte
Referenzvariable und mit mymenue.menue rufen wir die öffentliche Methode menue auf
(this.menue = function (id, anzahl, posi)). Und da jedes Untermenü andere Parameter benötigt, werden die
entsprechend an die "Hauptmethode" übergeben. Das Schema ist dabei so: [ID des Untermenüs],[Anzahl der Einzelpunkte
des Untermenüs][Ausgangsposition].
Die Werte im Einzelnen
Damit ihr nicht mehr in die menue.htm schauen müsst (was ihr zu diesem Zeitpunkt ja eh nicht mehr tun solltet),
liste ich einfach mal Werte auf, die ihr braucht.
'b_0'=>'m_0', 4, -84= Home'b_1'=>'m_1', 6, -144= Computer'b_2'=>'m_2', 8, -204= Sprachen'b_3'=>'m_3', 4, -84= Betriebssysteme'b_4'=>'m_4', 3, -54= Kurioses
4. Wichtig!
Faule und/oder intelligente Leute (so wie ich) könnten natürlich auf die Idee kommen, das Ganze zu vereinfachen. Man haut die Werte einfach in ein Array und erstellt die Event-Handler in einer Schleife.
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);
// etc
var mymenue = new animateMenue(1, 31, 5);
for (i in list)
{
document.getElementById(i).onmouseover = function ()
{
mymenue.menue(list[i][0], list[i][1], list[i][2]);
}
}
Denkste!
Das klappt nicht! Warum? Man muss sich das so vorstellen. Bei der Variante mit den Arrays erzeugen wir beim Laden
der Seite diese Event-Handler. Allerdings wird zuerst die Schleife schon komplett abgearbeitet und es steht bei einem anschließenden
mouseover immer nur der letzte Wert des Arrays zur Verfügung. Daher muss man
(leider) für jeden einzelnen Hauptmenüpunkt den entsprechenden Event-Handler per Hand erzeugen. Es gibt zwar eine elegante Lösung,
das zu umgehen, aber dazu komme ich später bei dem Abschnitt Alternative Event-Handler.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt