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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
快速了解Node中的Stream流是什么
Feb 13 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中的日期时间处理详解
2016/11/17 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python 实现Harris角点检测算法
2020/12/11 Python
丑小鸭教学反思
2014/02/03 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
大学生自我鉴定书
2014/03/24 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
经验交流材料格式
2014/12/30 职场文书
中学生自我评价范文
2015/03/03 职场文书
民事申诉状范本
2015/05/20 职场文书
无保留意见审计报告
2015/06/05 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang