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 相关文章推荐
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python编写登陆接口的方法
2017/07/10 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
通过实例学习Python Excel操作
2020/01/06 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
基于Pytorch SSD模型分析
2020/02/18 Python
基于python实现坦克大战游戏
2020/10/27 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
文秘大学生求职信
2014/02/25 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
入党积极分子评语
2014/05/04 职场文书
涨价通知
2015/04/23 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
Python四款GUI图形界面库介绍
2022/06/05 Python