js中关于动态添加事件，不能使用循环变量的问题
在编写事件的时候，我们难免会遇到以下这种情况：
<!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中关于动态添加事件，不能使用循环变量的问题的更多相关文章
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- js动态添加事件
转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...
- js实现动态添加事件
js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...
- 给ul中的li添加事件的多种方法
给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
随机推荐
- 算法与数据结构实验题 5.2 Missile
1.题目: 2.解题思路: 把每个点对应的两条半径求出,之后对d1进行升序排序,对应d2也改变位置.其中一个圆心的半径r1确定之后,除去第一个圆包围的点,在其余点中找到另外一个圆的最长的半径r2,此时 ...
- 使用Memcached提高.NET应用程序的性能
在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有发 ...
- iOS.StaticLibrary.1-avoid-duplicate-symbol-in-static-library[draft]
Avoid duplicate symbol in static library and its customer 发布static library给使用者使用.在实际的工程实践中,iOS静态库一般会 ...
- Bootstrap 基础学习笔记（一）
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都 ...
- 将Qt5.5 动态链接生成的exe及依赖dll打包方法
Qt静态编译链接生成的exe文件,不需依赖七大姑八大姨的一堆dll,可以独立运行,发布很方便.但绝大多数用的都是Qt开源版本,如果用静态链接,会有些限制.那有没有办法即能享受静态编译的方便,又不受开源 ...
- fastjson生成和解析json数据，序列化和反序列化数据
本文讲解2点: 1. fastjson生成和解析json数据 (举例:4种常用类型:JavaBean,List<JavaBean>,List<String>,List<M ...
- UIMenuController 实现长按显示自定义菜单功能
这段时间在集成使用融云聊天功能的时候,想自定义消息cell的长按的菜单,在网上查了查,这是根据 UIMenuController 实现的.具体代码如下,我是使用一个btn实现的 首先创建一个btn,并 ...
- git 安装与配置
Git服务器搭建 1. 环境部署 系统环境:服务器端:CentOS 6.5 ,ip:192.168.56.100 Master 客户端:CentOS 6.5 ,ip:192.168.56.101 Sl ...
- php中文截取无乱码方法
直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一个中文字符“锯”成两半.解决办法: 1.使用mbstring扩展库的mb_substr截取就不会出现乱码了. ...
- 【kd-tree】bzoj2716 [Violet 3]天使玩偶
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; #define ...