标签：
这是JavaScript中一个老生常谈的问题，也是初学者较难理解的问题。当给一系列元素添加事件时，常常会出现一些我们不希望出现的问题。例如以下代码：
//给li元素批量添加click事件 window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0;i<lists.length;i++){ lists[i].onclick = function(){ alert(i); } } }
这里我们期望当点击li元素时，返回它的索引。不幸的是，每次点击后返回的都是lists.length的数值。
原因是什么呢？当页面onload完成以后，for循环立即被执行完毕。全局变量i马上得到最终值lists.length，当某个li元素被触发click事件时，会执行匿名函数中的代码，代码沿着作用域链向上查找i，结果只能找到全局变量。这时，该发生的都已经发生了，i早就不是原来的那个索引i了，而是for循环执行完毕后的终值了。
解决这个问题有很多种办法。最常用的方法是创建一个闭包。代码如下：
window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0;i<lists.length;i++){ lists[i].onclick = (function(num){ return function(){ alert(num); } })(i); } }
这里介绍一种更容易理解的方法，代码如下：
window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0;i<lists.length;i++){ lists[i].index = i; lists[i].onclick = function(){ alert(this.index); } } }
标签：
原文地址：http://www.cnblogs.com/cyniczzz/p/4855111.html
