今天我在向onclick
事件添加函数时遇到了JavaScript中的一个奇怪行为。
让我解释一下:
动态创建一些按钮并向其onclick
事件添加函数时,如下所示:
function createButton(a) {
button = document.createElement("button");
button.setAttribute("id","a"+a);
button.innerHTML = "a"+a;
button.onclick = function () {
alert("Should be the same: a"+a+" and "+this.id);
};
return button;
}
for (var a=0;<3=;a++) {
document.body.appendChild(createButton(a));
}
按下第一个按钮时收到以下消息:
"应该一样:a0和a0 "*,符合预期。
但是当我想做同样的事情而不使用单独的函数(createButton
)时,就像这样:
var button;
for (var a=0;a<=3;a++) {
button = document.createElement("button");
button.setAttribute("id","a"+a);
button.innerHTML = "a"+a;
button.onclick = function () {
alert("Should be the same: a"+a+" and "+this.id);
};
document.body.appendChild(button);
}
a=999;
现在我按下第一个按钮时得到了这个消息:
"应该一样:a999和a0 "*。
有人知道为什么它们不能产生相同的警报吗?有没有办法让第二个例子像第一个一样工作呢?(我知道button.onclick = "alert('Should be the same: a"+a+" and "+this.id+"'))
可以做到这一点,但那只是丑陋的)
如有任何帮助,我们将不胜感激,您可以在http://xc-results.com/static/stackoverflowq1.htm查看该脚本
3条答案
按热度按时间4urapxun1#
在第二个示例中,
button.onclick
是闭包:一个函数+一些有界变量(在本例中为a
)。这意味着a
将在onclick()
被 * 求值 * 时求值,而不是在它被 * 定义 * 时求值。在button.onclick
被运行时,a
等于999,这就是您的结果。piv4azn72#
这是一个很常见的问题。
警报中的a是对值为999的变量a的引用。因此,所有警报都将具有相同的a = 999。
为了避免这种情况,您需要在添加onclick时立即计算a。
这很有可能行得通。
w46czmvw3#
这在JavaScript中并不奇怪。
在脚本完成计算并且
a
等于999
之后,您将调用alert()
。