Jannis: Eventhandler dynamisch hinzufügen

Hallo Forum,

Ich hatte vor, den Style meines Menüs teilweise mit Javascript zu erzeugen. Und zwar so:

Die Menüenträge sind alle in einer Tabelle.
Jeder Eintrag soll mehrere Eventhandler enthalten, um genauer zu sein OnClick, OnMouseOver, OnMouseOut, OnMouseDown und OnMouseUp.
Bei jedem dieser Ereignisse wird der Style geändert, indem eine Javascriptfunktion ausgeführt wird. Diese ist bei jedem Eintrag im Menü immer die gleiche. Soweit kein Problem.

Um jetzt viel (sehr viel) Speicherplatz und übertragungszeit, sowie Tippzeit zu ersparen, habe ich mir gedacht, dass es auch möglich sein müsste, alle Eventhandler mit einem JScriptaufruf ganz zu Anfang zu erstellen.

Dann habe ich mir gedacht, ich könnte doch jedem Objekt in der Tabelle den gleichen Namen geben und dann auf alle Elemente gleichzeitig zugreifen. Geht zwar glaub ich irgendwie, hab ich aber nicht hingekriegt.
Dann habe ich es mit einer For-Schleife gemacht.
Jetzt habe ich das Problem, dass ich es per
document.getElementsByName('Menulist')[3].attributes nicht hinbekomme, ein neues Attribut zu erstellen.
Ich müsste also in jeden Menüeintrag (TD) das Attribut reinschreiben, was aber die Übersichtlichkeit nicht merklich erhöht.

Dazu eine Veranschaulichung:
Früher sahen meine Menüeinträge (jeder von ihnen) so aus (mit Ausnahme der ID):

<tr><td class=tbutton id="tButtonX0" style="width: 130px;font-size:17px;height:30px" onmouseover="if(this.className!='tbutton-on') {TOver(0);this.className='tbutton-hover';}" onmouseout="if(this.className!='tbutton-on') {TOut(0);this.className='tbutton';}" align="center" onmousedown='if(this.className!="tbutton-on") {this.className="tbuttonClick";}' onmouseup='if(this.className!="tbutton-on") {this.className="tbutton-hover";}' onClick="document.getElementById('tButtonX'+document.form2.ButtonFokus.value).className='tbutton';TOut(document.form2.ButtonFokus.value);this.className='tbutton-on';TOut(0);document.form2.ButtonFokus.value=0;Individuell(1)">
<font class=font1 id="tFont0">Übersicht</font></td></tr>

Mein Ziel ist, dass jeder Eintrag so aussieht(mit Ausnahme der id):

<tr><td class=tbutton id="tButtonX0" align="center" onClick="Individuell(1)"><font id="tFont0">Übersicht</font></td></tr>

Mit dem CSS habe ich keine Probleme, dass ist bei mir zwar "veraltet", aber das verbessere ich gerade noch.
Mir geht's nur darum, nicht dauernd alle Eventhandler und dann noch überall das gleiche aufzulisten.

Kann mich da vielleicht jemand beraten?

Vielen Dank,

Jannis

PS: Kann ich hier den Code auch irgendwie in einer anderen Farbe anzeigen lassen?

  1. Hallo,

    wenn Du Deiner Tabelle mit der Navigation eine ID gibst (zB. id="meinMenue"), kannst Du sie über document.getElementById("meinMenue") als "Objekt" ansprechen. Unter anderem hast Du dann Zugriff auf die "Unterobjekte" (tr, td, etc.) mit getElementsByTagName("TD").

    var alleTDs = document.getElementById("meinMenue").getElementsByTagName("TD");
    holt Dir also alle TDs aus Deiner Menütabelle in ein Array.

    Das kannst Du nun durchlaufen und Deine Handler zuweisen:
    for (var i=0; i<alleTDs.length; i++)  {
     alleTDs[i].onclick = function(e){machWas();};
     alleTDs[i].onmouseout = function(e){machWasAnderes();};
     ...
    }

    Viele Grüße

    Michi

    1. Ahhh! Das geht wunderbar!

      vielen, vielen Dank, michi!

      MfG: Jannis