addEventListener

[Matti Mäkitalo]

Hi,

Ich möchte einer anzahl von elementen einen eventhandler zuweisen mit anonymen funktionen. nur leider, gibt er mir immer die höchste Variable i zurück, also in dem Falle 2. Ich möchte aber, dass jedes element "eindeutig" ist. wie kann ich das realisieren?

function test() {
var Nodedf = document.getElementById('op').getElementsByTagName('dt');
var y = 0;
for(i = 0; i < Nodedf.length; i++)
   {
   Nodedf[i].addEventListener('click', function() { window.alert('Test'+ i-1); }, false);
   y++;
   }
}

  
Das Problem ist, dass du mit der anonymen Funktion eine sogenannte Closure definierst. Wenn du ihn ihr eine Variable aus dem äußeren Scope nutzt, dann ist es dieselbe Variable. Am Ende der for-Schleife hat i den Wert Nodedf.length. Jede Closure nutzt i (und nicht den Wert von i, den i zur Zeit der Definition des Closures hatte).  
  
Ein einfaches Konstrukt, um das zu verhindern:  
  
~~~javascript
function createEventListener(j) {  
   return function() { window.alert('Test'+ j-1); };  
}  
  
// ...  
var i = 0;  
Nodedf[i].addEventListener('click', createEventListener(i), false);

Hier erstellt die Funktion createEventListener eine anonyme Funktion, welche nicht auf die Variable i aus dem äußersten Scope zugreift.

Bis die Tage,
Matti