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

Schreibe einen Kommentar