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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
javascript表单正则应用
Feb 04 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
微信小程序的mpvue框架快速上手指南
May 15 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 文件扩展名 获取函数
2009/06/03 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python生成器generator用法示例
2018/08/10 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
pygame实现打字游戏
2021/02/19 Python
在python shell中运行python文件的实现
2019/12/21 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
厕所文明标语
2014/06/11 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书