使用标准 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);
}

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

Make buttons which call same event handler using standard DOM manipulations

javascript

dom-events