用立即执行函数 解决闭包问题

<div>DIV 0</div>
<div>DIV 1</div>

 <script>
var div = document.getElementsByTagName("div");
for(var i = 0; i < div.length; i++){
div[i].addEventListener("click",function(){
alert("div # " + i + " was clicked！")
});
}

</script>

当点击DIV 0时，弹出的是以下图所示：



这个就是个经典的闭包问题，由于闭包，addEventListener里面的匿名函数中的变量i一直保持着外部变量i的引用（也就是说无论是匿名函数还是匿名函数外的函数，就要变量i的值变了，都会变） ，所以等循环结束时，i 的值就是最后的值，也就是2。

解决的问题的办法是：加立即执行函数，使得匿名函数内的变量i与外部函数的变量i的引用关系断掉。

<div>DIV 0</div>
<div>DIV 1</div>

<script>
var div = document.getElementsByTagName("div");
var div = document.getElementsByTagName("div");
for(var i = 0; i < div.length; i++){
(function(index){
div[index].addEventListener("click",function(){
alert("div # " + index + " was clicked!")
});
})(i);
}

</script>

此时点击DIV 0 时，就会弹出我们所期望的值。