JavaScript在for循环中绑定事件解决事件参数不同的情况


Posted in Javascript onJanuary 20, 2014

有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数。。。

上网查资料!!!结果大神说用闭包解决

代码:

for(var i=0;i<10;i++){ 
btns[i].onclick=(function(i){ 
return function(){alert(i)} 
})(i) 
}

大概原因是直接用btns[i].onclick=function(){alert(i)}时,JavaScript引擎会先将for循环里的代码执行完,

当用户出发onclick事件时,JavaScript会寻找i,结果会找到运算完成之后的i,也就是10

但是用闭包处理的话,i会成为函数的局部变量

Javascript 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
javascript break指定标签打破多层循环示例
Jan 20 #Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 #Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 #Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 #Javascript
js取值中form.all和不加all的区别介绍
Jan 20 #Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 #Javascript
引用外部脚本时script标签关闭的写法
Jan 20 #Javascript
You might like
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
元旦寄语大全
2014/04/10 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书