浅谈JS闭包中的循环绑定处理程序


Posted in Javascript onNovember 09, 2014

前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件。就是这个问题让我整整调了一个下午。最后还是下班回家,上网查资料才知道怎么解决的。 (PS:之前也在《jQuery基础教程》第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来。)

大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的。谢谢!

先贴上错误的例子让大家看看。(例子里面用到jQuery,请导入jQuery库)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>循环绑定处理程序</title> 

<script src="js/jquery-2.1.1.min.js"></script> 

<script type="text/javascript"> 


$(function(){ 



for(var i=1;i<=4;i++){ 




$("#btn"+i).get(0).onclick=function(){ 





alert(i); 




} 



} 


}); 

</script> 

</head> 

<body> 

<button id="btn1">按钮1</button> 

<button id="btn2">按钮2</button> 

<button id="btn3">按钮3</button> 

<button id="btn4">按钮4</button> 

</body> 

</html>

 

这段代码运行之后,点击按钮,弹出的alert中显示数据几呢,我之前一直认为按钮1到按钮4,对应的alert中的数字也是1到4。要是你也这样想,那就错了。

点击每个按钮,alert中都是显示数字4,没想到吧!

现在写几种解决方案,共大家参考 !

第一种、编写一个function,在这个function中返回一个函数

<script type="text/javascript"> 
$(function(){ 


for(var i=1;i<=4;i++){ 



$("#btn"+i).get(0).onclick=btnClick(i);



} 

}); 

var btnClick=function(value){ 


return function(){ 



alert(value); 


} 

} 

</script>

第二种、使用立即调用函数表达式

(function(value){

//代码块

})(i)//这就是立即调用函数表达式

<script type="text/javascript"> 
$(function(){ 


for(var i=1;i<=4;i++){ 



$("#btn"+i).get(0).onclick=(function(value){ 




return function(){ 




alert(value); 



} })(i);



} 

}); 

</script>

 

第三种、使用jQuery的each函数

<script type="text/javascript"> 
$(function(){ 


$.each([1,2,3,4],function(index,value){ 




$("#btn"+value).get(0).onclick=function(){ 




alert(value); 



} 


}); 

}); 

</script>

使用上面三种情况,就可以避免一开始那个情况了。

其中get(0)指的是将jQuery对象转为DOM对象。

以上就是个人对JS闭包中的循环绑定处理程序的理解,分享给大家,希望能对小伙伴们有所帮助

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
jquery常用方法及使用示例汇总
Nov 08 #Javascript
JQuery遍历json数组的3种方法
Nov 08 #Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
js实现日历与定时器
2017/02/22 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python list语法学习(带例子)
2013/11/01 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python中格式化format()方法详解
2017/04/01 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
高一化学教学反思
2016/02/22 职场文书