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的执行过程(图文)
May 20 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 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
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python 多进程和数据传递的理解
2017/10/09 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
详解Python中第三方库Faker
2020/09/25 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
土木工程毕业生自荐信
2013/09/21 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
JAVA API 实用类 String详解
2021/10/05 Java/Android