用类(function(){})()实现点击显示index索引值的详解

code：

 <script type="text/javascript">
     for(var i = ; i < ; i++){
         var btn = document.createElement("button");
         btn.appendChild(document.createTextNode("button" + i));
         btn.addEventListener("click", (function(x){return function(){
             console.log(x);
         }})(i));
         document.body.appendChild(btn);
     }
 </script>

浏览器显示：

1,2,3,4,8,9,10不用解释。主要看5-7，实现点击出现对应索引的监听事件。

它的运行过程大概是这样的：

当文档载入的时候，for循环，输出4个按钮及按钮文本。此时为每个按钮绑定了一个click事件，当js执行到此处的时候，自执行函数执行，传入i值给参数x，返回一个匿名函数，该匿名函数被绑定给每个button，保存有x参。当点击的时候，该函数执行。

其他实现方法：

方法1：

<script type="text/javascript">
for(var i = ; i < ; i++){
var btn = document.createElement("button");
btn.appendChild(document.createTextNode("button" + i));
btn.onclick = (function(x){return function(){
console.log(x);
}})(i);
document.body.appendChild(btn);
}
}
</script>

方法2：

<script type="text/javascript">
for(var i = 0; i < 5; i++){
var btn = document.createElement("button");
btn.appendChild(document.createTextNode("button" + i));
(function(x){btn.onclick = function(){
console.log(x);
}})(i);
document.body.appendChild(btn);
}
}
</script>