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

code：

<script type="text/javascript">
    for(var i = 0; i < 5; 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 = 0; i < 5; 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>