在编写事件的时候,我们难免会遇到以下这种情况:
<!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. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  3. js动态添加事件

    转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...

  4. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

  5. 给ul中的li添加事件的多种方法

    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...

  6. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  7. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  8. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  9. JS对select动态添加option操作 (三级联动) (搜索拼接)

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

随机推荐

  1. 常见算法是js实现汇总(转载)

    常见算法是js实现汇总 /*去重*/ <script> function delRepeat(arr){ var newArray=new Array(); var len=arr.len ...

  2. WebStorm常用设置和常用快捷键

    今天下载了最新版本的WebStorm 7.反正又要重新设置一番了,干脆写下来记录到博客里面,免得以后每次忘了还要到处搜索比较麻烦. 加速 禁用多余的插件,关掉没必要的代码检查项.webstorm慢的原 ...

  3. 第七章 springboot + retrofit

    retrofit:一套RESTful架构的Android(Java)客户端实现. 好处: 基于注解 提供JSON to POJO,POJO to JSON,网络请求(POST,GET,PUT,DELE ...

  4. Daily Scrum 12.1

    今日完成任务: 完成了对源代码结构的修改,删除冗余等:和其他小组讨论了关于整合的问题,向其他小组介绍自己小组使用的数据库等. 明日任务: 晏旭瑞 初步完成文档上传下载 孙思权 深入了解数据库中每个表, ...

  5. js获取文件大小

    var file = urlBox.doc.activeElement.files[0]||urlBox.files[0] ; if (file) { var fileSize = 0; if (fi ...

  6. 将Qt5.5 动态链接生成的exe及依赖dll打包方法

    Qt静态编译链接生成的exe文件,不需依赖七大姑八大姨的一堆dll,可以独立运行,发布很方便.但绝大多数用的都是Qt开源版本,如果用静态链接,会有些限制.那有没有办法即能享受静态编译的方便,又不受开源 ...

  7. PHP ftp使用

    本文章来总结几个利用php中的ftp功能来实现通过FTP上传文件,有需要学习的朋友可参考参考.ftp_get() 函数从 FTP 服务器上下载一个文件.若成功则返回 true,失败则返回 false. ...

  8. maven打包时使用的pom配置

    <build> <plugins> <!-- compiler插件, 设定JDK版本 --> <plugin> <groupId>org.a ...

  9. Java里的if else语句例子

    import java.util.Scanner;public class if_else2{ public static void main(String[] args) { Scanner s=n ...

  10. [Leetcode][JAVA] Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...