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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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/24 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python 求10个数的平均数实例
2019/12/16 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
python re模块常见用法例举
2021/03/01 Python
留学自荐信
2013/10/10 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
地陪导游欢迎词
2015/01/26 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS