在编写事件的时候，我们难免会遇到以下这种情况：
<!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. libcurl多线程超时设置不安全(转)
			
    from http://www.cnblogs.com/kex1n/p/4135263.html (1), 超时(timeout) libcurl 是 一个很不错的库,支持http,ftp等很多的协议 ...
    
			
    2. 
						
  2. Linux系统下 解决Qt5工程打不开的方法
			
    一.问题现象 打开Qt工程的时候,控制台报错:Could not find qmake configuration file default. 二.问题原因 我碰到这种问题的原因是我的Linux系统装 ...
    
			
    3. 
						
  3. java多线程学习-同步（synchronized）
			
    (示例都是网上视频的) 假如两个线程同时调用一个方法输出字符串 public class SynchronizedTest extends Thread { public static void ma ...
    
			
    4. 
						
  4. linux 下部署 kafka
			
    参考文章 http://www.cnblogs.com/sunxucool/p/4459020.html http://www.cnblogs.com/oftenlin/p/4047504.html  ...
    
			
    5. 
						
  5. Spark Streaming
			
    Spark Streaming Spark Streaming 是Spark为了用户实现流式计算的模型. 数据源包括Kafka,Flume,HDFS等. DStream 离散化流(discretize ...
    
			
    6. 
						
  6. python-->基础-->003->字符串处理
			
    一.去除字符串首尾白空格 说明:即为去除字符串的首尾(即头部和尾部)的白空格(空格本身,回车\r,换行\n,制表符\t, 换页符\f ) 实例: str01 = ' abc def # ' print ...
    
			
    7. 
						
  7. mysql学习(2)-MySQL服务器优化
			
    调优思路: 1.数据库设计与规划--以后再修该很麻烦,估计数据量,使用什么存储引擎 2.数据的应用--怎样取数据,sql语句的优化 3.mysql服务优化--内存的使用,磁盘的使用 4.操作系统的优化 ...
    
			
    8. 
						
  8. fail2ban 原理 安装 使用
			
    cd fail2ban python setup.py install /etc/fail2ban/ 为配置文件目录; /usr/lib/pythonx.x/site-packages/fail2ba ...
    
			
    9. 
						
  9. CentOS 7下源码安装MySQL 5.7
			
    网上说linux安装mysql服务分两种安装方法: ①源码安装,优点是安装包比较小,只有几十M左右,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错: ②使用官方编译好的二进制文件安装,优点 ...
    
			
    10. 
						
  10. 10个你必须掌握的Linux超酷VI命令技巧
			
    大部分Linux开发者对vi命令相当熟悉,可是遗憾的是,大部分开发者都只能掌握一些最常用的Linux vi命令,下面介绍的10个vi命令虽然很多不为人知,但是在实际应用中又能让你大大提高效率. 在使用 ...
    
			
    11.