<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function onMyLoad(){
var arr = document.getElementsByTagName("p");
for(var i = 0; i < arr.length; i++){
arr[i].onclick = function(){
alert(i);//5次均输出5
}
}
}
</script>
</head>
<body "onMyLoad()">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>
以上代码期望依次输出0,1,2,3,4，实际却输出5,5,5,5,5，这是因为闭包导致，下来来具体介绍：
for循环是一个外部闭包，依次绑定的点击事件是一个函数实例，也产生了一个闭包域，它引用了外部闭包的变量i，外部闭包域中i的最终值为5，点击事件触发时引用外部闭包变量i（此时i=5），所以输出的值全为5。

解决方案
方法一：增加若干个对应的闭包域空间(采用匿名函数实现)专门用来存储原先需要引用的内容(下标值)，只限于基本类型(基本类型值传递，对象类型引用传递)

for(var i = 0; i<arr.length; i++){
(function (arg){//这个函数对象有一个本地私有变量arg(形参)，该函数的function scope的closure对象属性有两个引用：arr和i。i的值随外部改变，但是本地的私有变量(形参)arg不会受影响，其值在一开始被调用时就决定了
arr[i].onclick = function () {//onclick函数实例的function scope的closure对象属性有一个引用arg
alert(arg);//只要外部空间的arg不变，这里的引用值就不会改变
}
})(i);//立即执行匿名函数，传递下标i(实参)
}

方法二：将下标作为对象属性(name:“i”,value:i的值)添加到每个数组项(p对象)中

for(var i=0; i<arr.length; i++){
//为当前数组项(当前p对象)添加一个名为i的属性，值为循环体i变量的值
//此时当前p对象的i属性并不是对循环体的i变量的引用，而是一个独立p对象的属性，属性值在声明的时候就确定了
arr[i].i = i;
arr[i].onclick = function (){
alert(this.i);
}
}

方法三：增加若干个对应的闭包域空间用来存储下标。新增的匿名闭包空间内完成事件绑定。

//绑定的函数中的function scope中的closure对象的引用arg是指向将其返回的匿名函数的私有变量arg
for(var i = 0; i<arr.length; i++){
arr[i].onclick = (function(arg){
return function () {
alert(arg);
}
})(i);
}
方法四：使用ES6的let关键字

"use strict";
var arr = document.getElementsByTagName("p");
for(var i = 0; i<arr.length; i++){
let j = i;//块级变量
arr[i].onclick = function () {
alert(j);
}
}
---------------------
原文：https://blog.csdn.net/sinat_40172076/article/details/87161221

js中for循环点击事件（闭包）的更多相关文章

  1. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  2. Android 响应webview中图片的点击事件

    最近碰到个新需求需要点击webview中的图片进行放大显示. 整理了下思路,想到了下面的一个可行的方案. 方案思路, 1.在点击图片的时候调用本地的java方法并给出响应的图片地址 2.本地获得图片地 ...

  3. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  4. robot framework程序运行过程中，遇到点击事件之后，未出现点击之后的效果（求解）

    1.click Element操作,在实际过程中偶然会出现,日志显示已点击成功,但是实际自动化页面,没有点击成功之后的操作 现象: 现象描述:程序执行到点击侧边栏的[人员信息]之后,日志显示已经点击成 ...

  5. js中的循环

    js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...

  6. js中for循环的研究

    转自:http://blog.csdn.net/lushuaiyin/article/details/8541500 <html> <body> <b><ce ...

  7. Android Listview中Button按钮点击事件冲突解决办法

    今天做项目时,ListView中含有了Button组件,心里一早就知道肯定会有冲突,因为以前就遇到过,并解决过,可惜当时没有记录下来. 今天在做的时候,继续被这个问题郁闷了一把,后来解决后,赶紧来记录 ...

  8. java和js中for循环的区别

    java中for循环,先执行语句后循环 for (int i=1;i<10;i++){ for(int b=1;b<=i;b++){ System.out.print(b+"*& ...

  9. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

随机推荐

  1. uniapp - picker

    [普通json数组] 针对官方的普通json数组示例,做些填充 <template> <view> <view class="uni-title uni-com ...

  2. MySQL日常监控及sys库的使用【转】

    一.统计信息(SQL维度) 关于SQL维度的统计信息主要集中在events_statements_summary_by_digest表中,通过将SQL语句抽象出digest,可以统计某类SQL语句在各 ...

  3. Neural Architecture Search — Limitations and Extensions

    Neural Architecture Search — Limitations and Extensions 2019-09-16 07:46:09 This blog is from: https ...

  4. 监控指标 TP99 TP999 含义

    TP=Top Percentile,Top百分数,是一个统计学里的术语,与平均数.中位数都是一类. TP50.TP90和TP99等指标常用于系统性能监控场景,指高于50%.90%.99%等百分线的情况 ...

  5. python去除BOM头\ufeff等特殊字符

    1.\ufeff 字节顺序标记 去掉\ufeff,只需改一下编码就行,把UTF-8编码改成UTF-8-sigwith open(file_path, mode='r', encoding='UTF-8 ...

  6. JetBrainsIDEA-structure结构继承的图标说明

    图标3表示重写继承类中方法 图标2表示实现继承类抽象方法或接口中的方法 图标1表示未使用继承类中的方法 类中方法并非只统计显示继承类或实现接口中方法,而是对该类中所有方法进行分类,有可能某些方法是继承 ...

  7. C++使用fill初始化二维数组

    类似如下用法: fill(dis[0], dis[0]+maxn*maxn, INF); 因为 dis[0]才是dis的首元素 dis[0][0] 的地址.

  8. GoLand 2019.1 激活破解

    链接://https://blog.csdn.net/hi_liuxiansheng/article/details/89078405

  9. Centos7挂载新硬盘

    1.查看系统是否检测到新的硬盘设备 ls /dev/ |grep sd linux 中所有外设都会在这个目录下,对应一个文件,其中第一块硬盘是sda,第二块硬盘是sdb,第三块硬盘是sdc.其中sda ...

  10. c++中的不是数的数nan

    matlab中经常碰到nan,inf等特殊“数”,而在C++中也有相应的表示:例如std::numeric_limits <float>::quiet_NaN ();可以得到浮点型的nan ...