Javascript mehrere dynamische addEventListener erstellt in for-Schleife - die übergabe von Parametern funktioniert nicht
Ich wollen, verwenden Sie die Ereignis-Listener, um zu verhindern, dass Ereignis-bubbling auf ein div in einem div-Tag mit onclick-Funktionen. Dies funktioniert, ist die übergabe von Parametern, wie ich wollte:
<div onclick="doMouseClick(0, 'Dog', 'Cat');" id="button_id_0"></div>
<div onclick="doMouseClick(1, 'Dog', 'Cat');" id="button_id_1"></div>
<div onclick="doMouseClick(2, 'Dog', 'Cat');" id="button_id_2"></div>
<script>
function doMouseClick(peram1, peram2, peram3){
alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}
</script>
Jedoch habe ich versucht, zu erstellen Sie mehrere event-Listener in einer Schleife mit diesem:
<div id="button_id_0"></div>
<div id="button_id_1"></div>
<div id="button_id_2"></div>
<script>
function doMouseClick(peram1, peram2, peram3){
alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}
var names = ['button_id_0', 'button_id_1', 'button_id_2'];
for (var i=0; i<names.length; i++){
document.getElementById(names[i]).addEventListener("click", function(){
doMouseClick(i, "Dog", "Cat");
},false);
}
</script>
Richtig weist die Klick-Funktion, um jedes div, aber der erste parameter für jeden, der peram1
ist 3
. Ich hatte erwartet, 3 verschiedene event-Handler alle vorbeifahrenden verschiedene Werte von i
für peram1
.
Warum ist das passiert? Sind die event-Handler nicht alle trennen?
InformationsquelleAutor KDawg | 2013-01-05
Du musst angemeldet sein, um einen Kommentar abzugeben.
Problem ist, Verschlüsse, da JS nicht haben block scope (nur Funktion, Umfang)
i
ist nicht, was Sie denken, weil die event-Funktion erstellt mit einem anderen Bereich, so dass durch die Zeit, die Sie verwendeni
es ist bereits der aktuellste Wert aus derfor
Schleife. Sie benötigen, um den Wert voni
.Mithilfe einer IIFE:
Mit
forEach
:Danke. Ich Frage mich, warum
i
fiel aus dem Rahmen und zurückgebenundefined
element.InformationsquelleAutor elclanrs
Wie bereits schon das problem mit den Verschlüssen und Geltungsbereich von Variablen. Ein Weg, um sicherzustellen, dass der richtige Wert übergeben bekommt, ist zu schreiben eine andere Funktion zurückgibt, die die gewünschte Funktion, halten Sie die Variablen in den richtigen Rahmen. jsfiddle
Und zu veranschaulichen eine Möglichkeit, Sie tun können, diese mit einem Objekt statt:
oder etwas anders:
InformationsquelleAutor Stuart
Alles ist global in javascript. Es ist die variable aufrufen
i
die 3 nach der Schleife...wenn Siei
um 1000 nach der Schleife, dann würden Sie sehen, jeden Methodenaufruf erzeugen 1000 füri
.Wenn Sie wollen, um den Status beizubehalten, dann sollten Sie Objekte verwenden. Haben das Objekt eine callback-Methode, die Sie zuweisen, um die click-Methode.
Erwähnt Sie tun dies für Ereignis-bubbling...für das beenden-Ereignis bublling, die Sie wirklich nicht brauchen, dass, wie es gebaut ist, in der Sprache. Wenn Sie wollen, um zu verhindern, dass Ereignis-bubbling, dann sollten Sie das
stopPropagation()
Methode derevent
Objekt an den Rückruf übergeben wird.Eure Kommentare zu "wenn du ich 1000 nach der Schleife, dann würden Sie sehen, jeden Methodenaufruf erzeugen 1000 zum ich" wurden auch völlig korrekt : )
InformationsquelleAutor jyore
Ist es wegen der Sperrungen.
Check this out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake
Den sample-code und der code ist im wesentlichen der gleiche, es ist ein häufiger Fehler für diejenigen, die nicht wissen, "closure".
Um es einfach auszudrücken, wenn Sie Ihre erstellen Sie eine handler-Funktion, die es nicht eben greift auf die variable
i
von der äußeren Umwelt, aber auch "erinnert" sichi
.So, wenn der handler aufgerufen wird, wird es die
i
aber die variablei
ist jetzt, nach der for-Schleife, 2.Danke für Eure Erinnerung. Ich habe gerade bearbeitet meine post.
InformationsquelleAutor olindk