onChange auf Select legen

[Dr.Colossos]

Hi,

[...] ungern in meinem Template die HTML Tags mit JavaScript überflute lege ich die JavaScript Events beim laden der Seite auf die ganzen Formelemente [...]

Gut.

for( var i=0; i < document.foo.elements.length; i++ )
{
    document.getElementsByName("myFoo")[i].onClick = barNow;
}

»»  
  
Nein nein nein, das geht zwar so tatsächlich dass es funktioniert (purer Zufall), aber es ist trotdem falsch! :)  
  
Du iterierst hier über alle Elemente deines Forms(?), und rufst jedes mal darin getElementsByName auf .. Unsinn.  
  
Probiers mal so:  
  
~~~javascript
	  
selects = document.getElementsByTagName('select'); // liefert alle Elemente vom Typ <select>  
for( var i=0; i < selects.length; i++ )  
{  
     selects[i].onClick = barNow;  
}  
  
inputs= document.getElementsByTagName('input'); // liefert alle Elemente vom Typ <input>, der mehrere Untertypen hat ...  
for( var i=0; i < selects.length; i++ )  
{  
     // spezielles behandeln der Untertypen  
     if(inputs[i].type == 'text')  
          inputs[i].onClick = barNowTest;  
     else if(inputs[i].type == 'radio')  
          inputs[i].onClick = barNowRadio;  
     [...]  
     else if(inputs[i].type == 'password')  
          inputs[i].onClick = barNowRadio;  
}  

Das ginge noch besser, in dem du statt element.onClick = functionCall; auf addEventListener (standard) oder attachEvent (IE) zurückgreifst (siehe z.B. http://www.mediaevent.de/javascript/event_handler.html).

Das is leider wie oben ersichtlich wieder nicht browserübergreifend gleich, und daher wieder lästig ... es sei denn du nutzt ein JS-Framework wie z.b. prototype.js o.a. was davon widerum abstrahiert (derweil würde ich dir davon abraten, du scheinst noch Lücken zu haben, die würd ich erstmal kitten bevor ich mich auf ein so mächtiges Framework stürze).

Eine andere Lösung wäre noch das Event jeweils am Form abzufangen. Jeder Klick auf das Form (d.h. auf Selects, Radiobuttons etc. die im Form snd) wird auch an das Form weitergereicht (bubble-up).

Das kannst du daher auch so lösen:

document.myForm.onclick = myHandler;

function MyHandler(event)
{
   element = event.target; // auf dieses wurde geklickt
   nodeName= event.target.nodeName.toLowerCase;  // der Typ des Elements
   if(nodeName == 'select')
       handleSelect();
   else if(nodeName == 'input')
   {
      type = element.type;
      if(type == 'text')
          handleText();
      else if(type == 'radio')
          handleRadio();
      [...]
      else if(type == 'password')
          handlePassword();
   }
}

function handleSelect()
{
// code
}

function handleText()
{
// code
}

function handleRadio()
{
// code
}

function handlePassword()
{
// code
}

Vorteil: nur EIN event-handler pro Form, daher MEINER MEINUG NACH wenig speicher*hungrig und daher auch effizienter, u.a.

Nachteil: weniger Modular, daher evtl. schlechter wart/erweiterbar, u.a.