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