<!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. TCP的连接如何知道对方已经异常断开

    断电的话,对方不会发送任何数据包过来,包括RST.主机无法得知.如果是TCP已经连接,有个定时器,会发送空包,sequence number不变.如果一直收不到ack,会断定对方已经无法通信,而释放系 ...

  2. SQLSERVER教师学生成绩课程四表联合各种SQL考题

    --CREATE DATABASE EXAM_1 --GO USE EXAM_1 --判断并删除表 IF OBJECT_ID('Scores') IS NOT NULL DROP TABLE Scor ...

  3. SQLServer charindex函数， 查 某个字符 或 某个字符串 在 另一个字符串中的位置

    一:charindex()语法 CHARINDEX ( expression1 , expression2 [ , start_location ] ) 解析: expression1 必需 ---要 ...

  4. Android中Activity的启动模式（LaunchMode）和使用场景

    一.为什么需要启动模式在Android开发中,我们都知道,在默认的情况下,如果我们启动的是同一个Activity的话,系统会创建多个实例并把它们一一放入任务栈中.当我们点击返回(back)键,这些Ac ...

  5. CEF 远程调试

    转载:https://www.cnblogs.com/TianFang/p/9906786.html 转载:https://stackoverflow.com/questions/29117882/d ...

  6. 【linux基础err】NVIDIA-SMI has failed because it could't communicate with the NVIDIA driver.

    问题 安装nvidia driver和cuda关机重启之后出现不能进入系统的问题,进入命令行模式使用nvidia-smi检查驱动的问题. nvidia-smi NVIDIA-SMI has faile ...

  7. Windows系统因“CredSSP加密Oracle修正”无法远程连接

    解决办法如下: 在电脑本机运行(快捷键 Win+R)输入:gpedit.msc 回车: 计算机配置->管理模板->系统->凭据分配->右侧找到“加密Oracle凭据”双击-&g ...

  8. E: Unable to correct problems, you have held broken packages-之apt-get 下载报依赖问题

    今天在新来了一台ubutnu 18.04 在安装zabbix客户端是报依赖问题 root@VM_0_10:~# apt-get install zabbix-agent Reading package ...

  9. python：对list去重

    1.set()方法 numbers = [1,7,3,2,5,6,2,3,4,1,5] new_numbers = list(set(numbers)) print new_numbers 输出 [1 ...

  10. SpringBoot+MybatisPlus+MySql 自动生成代码 自动分页

    一.配置 <!-- Mybatis plus --> <dependency> <groupId>com.baomidou</groupId> < ...