在编写事件的时候，我们难免会遇到以下这种情况：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul> <li>内容一</li> <li>内容二</li> <li>内容三</li> <li>内容四</li> <li>内容五</li> <li>内容六</li> </ul></body><script> window.οnlοad=function(){ var oli = document.getElementsByTagName('li'); for (var i = 0; i < oli.length; i++) { oli[i].οnclick=function(){ alert(i); } } }</script></html>每次点击都会弹出6，而不是0,1,2,3,4,5,6这是什么原因造成的呢？ 下面做下分析：因为在for循环里面指定给oli[i].onclick的事件处理程序，也就是onclick那个匿名函数是在for循环执行完成后（用户单击链接时）才被调用的。 而调用时，需要对变量i求值，解析程序首先会在事件处理程序内部查找，但i没有定义。然后，又到方法外部去查找，此时有定义，但i的值是6（只有i大于6才会停止执行for循环）。 因此，就会取得该值——这正是闭包（匿名函数）要使用其外部作用域中变量的结果。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己的作用域）造成的。怎么解决这个问题呢？方案一、我们可以采用给对象自定义属性的方法；代码如下:
var oli = document.getElementsByTagName('li');for (var i = 0; i < oli.length; i++) { oli[i].index=i; oli[i].οnclick=function(){ alert(this.index); }}再次运行，我们会发现，此时依次点击就会弹出0,1,2,3,4,5；方案二、采用闭包的思var oli = document.getElementsByTagName('li');
for (var i = 0; i <= oli.length; i++) { (function(i){ oli[i].onclick = function() { alert(i); } })(i);}同样解决问题
转载于:https://www.cnblogs.com/songdongdong/p/6034968.html
相关资源：js 给动态生成的DOM绑定事件
