<!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. Linux下查看目录文件数和文件大小

    一.查看当前目录下文件个数 在linux下查看目录下有多少文件可以用:ls -l  命令查看,ls -lR 递归查看所有目录, 如果文件很多,则用wc命令 和 grep 命令进行过滤. wc命令显示输 ...

  2. 网易云音乐MP3外链地址

      网易云音乐MP3外链地址下载方法很简单的方法: 下载公式:http://music.163.com/song/media/outer/url?id=ID数字.mp3 把上面红色部分(ID数字)换成 ...

  3. JAVA Asponse.Word Office 操作神器，借助 word 模板生成 word 文档，并转化为 pdf，png 等多种格式的文件

    一,由于该 jar 包不是免费的, maven 仓库一般不会有,需要我们去官网下载并安装到本地 maven 仓库 1,用地址   https://www-evget-com/product/564  ...

  4. Kubernetes 集群日志管理 Elasticsearch + fluentd(二十)

    目录 一.安装部署 Kubernetes 开发了一个 Elasticsearch 附加组件来实现集群的日志管理.这是一个 Elasticsearch.Fluentd 和 Kibana 的组合.Elas ...

  5. RAID磁盘阵列结构

    RAID磁盘阵列结构原理其实很简单,就是每块硬盘不插在主板的硬盘接口上了,而是全插在RAID卡上,然后RAID卡再插到主板上,由RAID卡统一管理硬盘,做各种RAID磁盘策略(RAID0,RAID1, ...

  6. idea2018.1.1版激活码到2020.7

    N757JE0KCT-eyJsaWNlbnNlSWQiOiJONzU3SkUwS0NUIiwibGljZW5zZWVOYW1lIjoid3UgYW5qdW4iLCJhc3NpZ25lZU5hbWUiO ...

  7. Visual Studio特性学习

    官方档案: https://docs.microsoft.com/en-us/visualstudio/get-started/visual-studio-ide?view=vs-2019

  8. 安装donkeyid

    cd /usr/local/php/include/php/ext sudo git clone https://github.com/osgochina/donkeyid.git cd /usr/l ...

  9. XShell上传、下载本地文件到linux服务器

    Python之道发表于程序员八阿哥订阅 1.2K 腾讯云服务器 年付3折起 首次购买云服务器 最低3折起 超高性价比 限时抢购 Xshell很好用,然后有时候想在windows和linux上传或下载某 ...

  10. Java开发笔记（一百一十八）AWT按钮

    前面介绍了如何通过AWT显示程序的窗口界面,那么要怎样在该窗口上面添加丰富多样的控件呢?注意Frame类是个窗口工具,它由窗楣(标题栏)与窗体(窗口主界面)两部分组成,故而Frame类只对整个窗口统筹 ...