Javascript - onclick 函数被调用而无需先调用它

Question

我正在使用闭包在 javascript 中做一些练习，并且我已经玩过这个示例，我应该在其中创建按钮并在单击它们时提醒它们的号码:

function addButtons(numButtons) {   
    for (var i = 0; i < numButtons; i++) {     
    var button = document.createElement('input');     
    button.type = 'button';     
    button.value = 'Button ' + (i + 1);     
    button.onclick = function() {       
        alert('Button ' + (i + 1) + ' clicked');     
    }(i);  
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));   
    } 
}; 

addButtons(5);

但是，在页面加载时，脚本甚至在创建按钮编号之前就发出警报，为什么会这样？我尝试过将 onclick 方法替换为 addEventListener，如下所示:

button.addEventListener("click", function () {   
        alert('Button ' + (i + 1) + ' clicked');     
}(i)); 

但结果是一样的。

Answer 1

问题出在这一行

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}(i);

这意味着您正在创建一个 function() {}，一旦创建该函数，由于末尾的括号，该函数会立即执行。

只需将其更改为:

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
};

编辑:

顺便说一句，在点击处理程序中使用 i 变量将始终输出最后一次迭代编号。因为在 onclick 函数中，您引用的是 i 变量，当单击发生时，该变量将为 6(因为所有迭代都将在那时完成)。

所以如果你想输出按钮编号，你可以使用:

button.onclick = function() {
    // this means the current button that was clicked
    alert(this.value + ' clicked');     
};