DOM节点循环绑定事件

前端 JavaScript 开发中，我们经常会遇到为某些节点绑定相同事件的情况，代码如下：

$(function(){	
	for(var i=0;i<5;i++){
		$(".testt p:eq("+i+")").click(function(){
			alert(i);
		})
	}
})  

上述代码意在为 class="testt" 的 <ul> 下的五个 <li> 节点循环绑定点击事件，但运行结果事与愿违。无论我们点击任意 <li> 节点，弹窗的内容永远都是 5 ，即便我们是在 DOM 节点加载完成后才进行的事件绑定。

这里其实就涉及到 JavaScript 函数执行顺序的问题：当我们通过 for 函数进行事件的循环绑定时，JavaScript 内部并不是马上就对其执行绑定的，而是当我们激活绑定事件时才进行真正意义上的绑定。因此此时的 i 已经不再是 0 而变成了 5 。为此，我们需要将函数在绑定时就执行一遍。

PS：这里所说的执行并非真正意义上的执行激活事件，而是通过 JavaScript 自执行函数的形式将每一个函数与其对应的变量确定下来。

代码如下：

$(function(){	
	{
		for(var i=0;i<5;i++){
			(function (i) {
				$(".testt p:eq("+i+")").click(function(){
					alert(i);
				})
			})(i)	
		}
	}
})   

修改为上述代码后，当我们点击不同的 <li> 时，将会弹出不一样的结果。故证明所有 <li> 事件绑定成功。
PS：上述代码中涉及到 自执行匿名函数 相关知识点，不懂的同学请自行度娘。