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 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php构造函数的继承方法
2015/02/09 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python操作日期和时间的方法
2014/03/11 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Pytorch之contiguous的用法
2019/12/31 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
生产主管岗位职责
2013/11/10 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
教师读书笔记
2015/06/29 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL