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

<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 时，就会弹出我们所期望的值。