关于在for循环中绑定事件打印变量i是最后一次。
其实函数引用的外部变量都是最后一次的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:100px;
height:100px;
background-color:pink;
}
</style>
<script src="index.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
///////////////////////////////js代码//////////////////////////
window.onload = function(){
var box = document.getElementById("box");
var num = 0;
function a(){
console.log(num);
} box.onclick = function(){
num ++;
a(); // 1,2,3,4....每次单击都会加1，说明函数引用外部变量是引用那个变量的最后一次的值。
}
}
再来看一个例子：
window.onload = function(){
var box = document.getElementById("box");
var num = 0;
for(var i=0;i<10;i++){
box.onclick = function(){
console.log(i); //总是打印10
}
}
}
如果你知道作用域链就好办多了，在这个函数里面的i其实引用的是最后一次i的值，为什么不是1,2,3,4...呢？因为在你for循环的时候，你并没有执行这个函数，你这个函数是在你点击的时候才执行的，当执行这个函数的时候，它发现它自己没有这个变量i，于是向它的作用域链中查找这个变量i，因为当你单击这个box的时候已经for循环完了，所以储存在作用域链里面的i的值就是10，最后就打印出来10了。
for(var i=0;i<10;i++){
function a(){
console.log(i);
}
a(); //1,2,3,4,5....
}
为什么这样就可以呢？因为你在循环变量i的时候已经执行了函数a，自然变量i是什么就打印出来什么。
现在知道为什么绑定事件的时候打印出来的是最后一次的for循环的值了吧。
如果你知道理解这段话，我相信你知道怎么去解决这个问题。
解决方法1：让这个函数直接执行。
解决方法2：将每次for循环中的变量i保存到某个地方。
方法1：
window.onload = function(){
var box = document.getElementById("box");
var num = 0;
for(var i=0;i<10;i++){
box.onclick = a();
function a(){
console.log(i); //1,2,3,4.....
}
}
}
虽然这样可以打印出每次的变量i的值，但是我们没有点击box的时候它已经执行完了，直接无视了点击事件，也就是说这个点击事件已经可有可无了，所以我们用这种方法在绑定事件中就显得不那么可用了，那我们用方法2试试吧。
方法2：
window.onload = function(){
var div = document.getElementsByTagName("div");
var num = 0;
for(var i=0;i<div.length;i++){
(function(i){
div[i].onclick = function(){
console.log(i);
}
})(i)
}
}
成功打印每个i的值，原理就是通过自执行函数，并且将变量i保存到这个自执行函数的参数中。如果你不知道什么是自执行函数可以看初识js中的闭包这一节。
你们我们应该选择那种方法呢？当然看你的情况了，如果没有关于绑定事件的话，就是说让这个函数直接执行的，那就用方法1，否则用方法2，另外方法2通用，但是因为里面的i会一直保存到内存中比较消耗性能的原因，所以在没有必要的情况下尽量不要用这种方式，其实还可以将i绑定到元素的属性上。
关于在for循环中绑定事件打印变量i是最后一次。的更多相关文章
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- jQuery中绑定事件bind() on() live() one()的异同
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- 不使用jquery情况下循环添加绑定事件方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- JQuery中绑定事件（bind()）和移除事件（unbind()）
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...
- JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
- Jquery中绑定事件的异同
谈论jquery中bind(),live(),delegate(),on()绑定事件方式 1． Bind() $(selector).bind(event,data,function) Event:必 ...
随机推荐
- Leetcode 326 Power of Three 数论
判断一个数是否是3的n次幂 这里我用了一点巧,所有的int范围的3的n次幂是int范围最大的3的n次幂数(即3^((int)log3(MAXINT)) = 1162261467)的约数 这种方法是我 ...
- [原创]Java性能优化权威指南读书思维导图
[原创]Java性能优化权威指南读书思维导图 书名:Java性能优化权威指南 原书名:Java performance 作者: (美)Charlie Hunt Binu John 译者: 柳飞 ...
- mac上安装homebrew
1:关于homebrew下载地址 homebrew下载地址网上版本很多:我用了几个都是显示 404 bad request 如图:均无法现在 有一个网址会给出最新的 安装地址: the URL is: ...
- AutoCAD2007专业版
07版的AutoCAD应该是一个很经典的版本了,点此下载,附带破解注册机和天正的插件包,可以查看天正软件画的图纸. AutoCAD2007本身没有标签工具,切换窗口很不方便,如果能配合多标签插件Doc ...
- 【linux】文件隐藏属性
这些隐藏的属性确实对于系统有很大的帮助的- 尤其是在系统安全 (Security) 上面,重要的紧呢!不过要先强调的是,底下的chattr指令只能在Ext2/Ext3的文件系统上面生效, 其他 ...
- 好老板VS坏老板
以下是漫画图解: 现在大家应该都能做出正确的判断了吧? 那90后的员工碰上70后的老板又会如何呢? 过去30多年来,基于资源禀赋.行政区划及产业政策等,形成了不同城市发展格局,接下来十年中国经济结构调 ...
- nodejs express 框架解密2-如何创建一个app
本文是基于express 3.4.6 的 1.在我们的app.js 文件里面有这么几行 http.createServer(app).listen(app.get('port'), function( ...
- vim 光标按行移动
记录一下: [ H/M/L ] 注意:这几个命令是大写的. 使用H/M/L这三个键,可以让光标跳到当前窗口的顶部.中间.和底部,停留在第一个非空字符上.H命令和L命令前也可以加一个数字,但数字的含义不 ...
- 【转】安装OpenSSL缺失Microsoft Visual C++ 2008 Redistributables的解决方案
from: http://www.cnblogs.com/luguo3000/p/3539815.html 在安装OpenSSL的时候通常会提示以下错误: "The Win32 OpenSS ...
- OsmocomBB && Motorora C118
OsmocomBB 编译安装: http://www.cnblogs.com/hangxin1940/p/3375216.html ##准备: C118 ![C118](http://images.c ...