JS中批量给元素绑定事件过程中的相关问题使用闭包解决


Posted in Javascript onApril 15, 2013

在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟,
思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内

1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com)
2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX }
代码示例:

<!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> 
<title>Untitled Page</title> 
<script type="text/javascript" src="jquery-1.7.2.js" ></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function (){ 
function Ev(i){ 
this.index = i; 
this.click = function (){ 
alert(this.index ); 
} 
} 
for(var k=1; k<4; k++){ 
//闭包函数1 
// (function(x){ 
// $("#div" + x).click(function(){ 
// f(x); 
// }); 
// }(k)); 
//使用with关键字 
with ({i: k}){ 
$("#div" + i).click(function(){ 
f(i); 
}); 
} 
} 
var f = function (m){ 
alert(m); 
} 
}); 
</script> 
</head> 
<body> 
<div id="div1">1 
</div> 
<div id="div2">2 
</div> 
<div id="div3">3 
</div> 
</body> 
</html>
Javascript 相关文章推荐
关于JavaScript与HTML的交互事件
Apr 12 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 #Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 #Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 #Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 #Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 #Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 #Javascript
You might like
php学习笔记之 函数声明
2011/06/09 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
js 函数调用模式小结
2011/12/26 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
简单了解python变量的作用域
2019/07/30 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python读取csv文件实例解析
2019/12/30 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
大学自荐信
2013/12/12 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
电台编导求职信
2014/05/06 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
求职自我评价范文100字
2014/09/23 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
党支部鉴定意见
2015/06/02 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js