在编写事件的时候，我们难免会遇到以下这种情况：
<!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.onload=function(){
        var oli = document.getElementsByTagName('li');
        for (var i = 0; i < oli.length; i++) {
            oli[i].onclick=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].onclick=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);
}
同样解决问题
												


											
js中关于动态添加事件，不能使用循环变量的问题的更多相关文章
	

    
								
  1. 浅谈js中如何动态添加表头/表列/表格内容
		
    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
    
		
    2. 
						
  2. js动态添加事件-事件委托
		
    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
    
		
    3. 
						
  3. js动态添加事件
		
    转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...
    
		
    4. 
						
  4. js实现动态添加事件
		
    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html>  ...
    
		
    5. 
						
  5. 给ul中的li添加事件的多种方法
		
    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li>  ...
    
		
    6. 
						
  6. js对select动态添加和删除OPTION
		
    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
    
		
    7. 
						
  7. JS对select动态添加options操作[IE&FireFox兼容]
		
    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
    
		
    8. 
						
  8. 使用js对select动态添加和删除OPTION示例代码
		
    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...
    
		
    9. 
						
  9. JS对select动态添加option操作 （三级联动）  （搜索拼接）
		
    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C盘实际占用容量比显示的要少
			
    1.问题 服务器是Window Server 2008 R2,就几天时间,60G的C盘容量一下子满了,选中所有的文件,占用才20多G. 2.原因 1).有的文件没有系统管理员权限,大小不会显示出来.  ...
    
			
    2. 
						
  2. hdu 5666 (大数乘法) Segment
			
    题目:这里 题意:在线段x+y=q与坐标轴围成的三角形中,求有多少个坐标为整数的点,答案模上p. 很容易就想到最后答案就是((q-1)*(q-2))/2然后模上p就是了,但是这个数字比较大,相乘会爆l ...
    
			
    3. 
						
  3. ln 软链接与硬链接的区别再次回顾
			
    以下是整理的笔记 软硬链接区别 硬链接 软链接 文件有相同的 inode 及 data block 是另一个文件 只能对已存在的文件进行创建 可以对不存在的文件进行创建 不能交叉文件系统进行硬链接的创 ...
    
			
    4. 
						
  4. 使用事件等待句柄EventWaitHandler 实现生产者、消费者队列
			
    using System; using System.Threading; using System.Collections.Generic; class ProducerConsumerQueue  ...
    
			
    5. 
						
  5. Adding AirDrop File Sharing Feature to Your iOS Apps
			
    http://www.appcoda.com/ios7-airdrop-programming-tutorial/ Adding AirDrop File Sharing Feature to You ...
    
			
    6. 
						
  6. 拾遗：『Linux Capability』
			
    『Linux Capability』 For the purpose of performing permission checks, traditional UNIX implementations ...
    
			
    7. 
						
  7. 数据库 sql
			
    近期项目中会用到oracle,mysql,两者的建表sql 类型,函数都会混淆.现在特意整理一下: mysql :now(),   CONCAT("","",& ...
    
			
    8. 
						
  8. python中xrange和range的异同
			
    本文章系转载,原文来源不详. range    函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列.range示 ...
    
			
    9. 
						
  9. 第38讲：List伴生对象操作方法代码实战
			
    今天来看一下List伴生对像的操作方法 让我们来看下代码  println(List.apply(1,2,3))//等同于List(1,2,3)     println(List.range(1, 4 ...
    
			
    10. 
						
  10. [原] XAF 如何基于业务规则禁用属性
			
    How to: Disable Property Editors Based on a Business Rule // Developer Express Code Central Example: ...
    
			
    11.