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

code：

 1 <script type="text/javascript">
 2     for(var i = 0; i < 5; i++){
 3         var btn = document.createElement("button");
 4         btn.appendChild(document.createTextNode("button" + i));
 5         btn.addEventListener("click", (function(x){return function(){
 6             console.log(x);
 7         }})(i));
 8         document.body.appendChild(btn);
 9     }
10 </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>

 

转载于:https://www.cnblogs.com/jiangtian/p/self-run-function.html