James: addEventListener

SELF-Forum

addEventListener

James
– Informationen zu den Bewertungsregeln

hallo, ich bins leider nochmal

ich habe gerade rumgeteset, aber es ist auch mit for schleifen nichts gescheites rausgekommen.

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?

  
<!DOCTYPE html>  
<html>  
<head>  
<title>Testscript</title>  
[code lang=javascript]<script type="text/javascript">  
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++;  
   }  
}  
</script>

</head>
<body>
<div id='op'><dl><dt>Dedlfix:</dt><dd>Es war einmal ein dedlfix...</dd><dt>molily:</dt><dd>Machst du überhaupt was richtig James?</dd><dt>James</dt><dd>Ich hab es wieder nicht richtig gemacht...</dd></dl></div>
<a href='javascript: test();'>TESTEN</a>
</body>
</html>[/code]

Die Stelle window.alert('Test'+ i-1); möchte ich nachher durch window.alert(Nodedf[i-1].firstChild.data); ersetzen und dann noch weiter ausbauen mit paar extras. Aber das geht nicht, weil er mir ausgibt "James", egal ob ich den dedlfix oder molily sprechen anstupsen möchte. James fühlt sich ständig angesprochen.

Auf Testen klicken aktiviert das Script.

danke ...

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. addEventListener

    Matti Mäkitalo Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    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

    --
    Webapplikationen in C++ entwickeln
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. addEventListener

      James
      – Informationen zu den Bewertungsregeln

      function createEventListener(j) {

      return function() { window.alert('Test'+ j-1); };
      }

      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.  
  
Wunderbar, das funktioniert einwandfrei und war genau was ich gesucht habe und dieses neue Wissen wird mir bei meiner weiteren Arbeit sehr nützlich sein. Da werd ich mich mit diesen Closures noch beschäftigen müssen. Darf ich noch die Frage stellen: Wo hast du das gelernt, würdest du mir dafür eine bestimmte Webseite empfehlen?  
  

> Matti  

James :)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. addEventListener

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@James:

        nuqneH

        Darf ich noch die Frage stellen: Wo hast du das gelernt, würdest du mir dafür eine bestimmte Webseite empfehlen?

        molilys Einführung in JavaScript

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln