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

Question

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

<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>

使用这个：

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);
}

当我点击按钮时，我在控制台中得到4。 我究竟做错了什么？

是否可以在不使用匿名函数的情况下完成？

Answer 1

尝试通过每次迭代创建一个范围来解决闭包创建的问题，

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);
}