Javascript 使用标准DOM操作创建调用相同事件处理程序的按钮

我实际上想做的是生成带有按钮的容器，这些按钮具有相同的处理程序，但得到不同的参数，如下所示：

<div id="container">
    <button onclick="onclick_handler(1)">1</button>
    <button onclick="onclick_handler(2)">2</button>
    <button onclick="onclick_handler(3)">3</button>
</div>

1.
2.
3.

使用此选项：

function onload_handler() {
    var container = document.getElementById("container");
    var i;
    for (i = 0; i < 3; i++) {
        var button = document.createElement('button');
        button.innerHTML = i;
        button.addEventListener('click', function() {
             onclick_handler(i);
        });
        container.appendChild(button);
    }
}

function onclik_handler(val) {
    console.log(val);
}

函数onload_handler（）{
var container=document.getElementById（“容器”）；
var i；
对于（i=0；i<3；i++）{
var button=document.createElement（'button'）；
button.innerHTML=i；
addEventListener（'click'，function（）{
onclick_处理器（i）；
});
container.appendChild（按钮）；
}
}
函数onclik_处理程序（val）{
控制台日志（val）；
}

当我点击按钮时，我的控制台中有4个。我做错了什么

---

在不使用匿名函数的情况下也可以这样做吗？

尝试通过每次迭代创建一个作用域来解决闭包造成的问题

function(i){
  button.addEventListener('click', function() {
    onclick_handler(i);
  });
})(i);

你的全部代码是

function onload_handler() {
    var container = document.getElementById("container");
    var i;
    for (i = 0; i < 3; i++) {
        var button = document.createElement('button');
        button.innerHTML = i;
        (function(i){
          button.addEventListener('click', function() {
             onclick_handler(i);
          });
        })(i)
        container.appendChild(button);
    }
}

function onclik_handler(val) {
    console.log(val);
}

函数onload_handler（）{
var container=document.getElementById（“容器”）；
var i；
对于（i=0；i<3；i++）{
var button=document.createElement（'button'）；
button.innerHTML=i；
（职能（一）{
addEventListener（'click'，function（）{
onclick_处理器（i）；
});
})(一)
container.appendChild（按钮）；
}
}
函数onclik_处理程序（val）{
控制台日志（val）；
}