在一個循環中添加事件偵聽器與參數

Question

我以動態方式上單擊事件創建按鈕的方式如下：

//add button 
for(i=1;i<=narrow+1;i++){ 
    var btn = document.createElement("BUTTON"); 
    btn.id="element"+i; 
    var t = document.createTextNode("3D View"); 
    btn.appendChild(t); 
    btn.style.position="absolute"; 
    btn.style.top="520px"; 
    btn.style.left=100+120*(i-1)+"px"; 
btn.addEventListener('click', function(){window.alert(i-1+" "+nmol[i-1]);}); 

創建的按鈕都不錯，但在的addEventListener事件的函數的參數似乎沒有完全可以增加。當我打印我留下價值1.

任何人都可以解釋我爲什麼？

感謝

Answer 1

修改它，以便有循環

(function(index){ 
    btn.addEventListener('click', function(){window.alert(index-1+" "+nmol[index-1]);}); 
} 
)(i); 

發生了什麼事是i是全球性的循環，並通過一次點擊事件被觸發，i是內內關閉上次迭代的值。

但是，當您將一個函數括在括號中時，您正在有效地進行閉包，從而將變量的範圍縮小到括號內。

看到它的工作here