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对于循环是全局的，并且随着时间的推移触发了click事件，i是最后一次迭代的值。

但是，当您将一个函数括在括号中时，您实际上是在创建一个闭包，它将变量的范围缩小到括号内。

看到它正常工作here

在循环中添加带参数的事件侦听器

1 个答案: