js闭包解决多个点击事件
2016-06-12 16:37
357 查看
<script> var severalObj=window.document.getElementsByName("button"); for(var i=0;i<several.length.i++){ severalObj[i].onclick(){ alert(i); } } </script>
通常我们在前端中要为若干个节点添加相同的事件,为了减少代码量便想出使用上面的代码对这些节点进行循环绑定事件。然而事情并未像之前预想到的那样,实验后会发现无论点击哪个元素都会弹出several.length,而不是我们之前预想的i。这正是闭包(匿名函数)要使用外部作用于中变量的结果。而却,这也是由于匿名函数本身无法传递参数(故无法维护自己的作用域)造成的。
当函数调用外部变量是就构成一个闭包,里面的变量会受到别的地方影响,所以解决的方式为:构建一个只有该匿名函数本身才可以访问的闭包,保存只供本身使用的变量。
for(var i=0;i<severalObj.length;i++){ (function(i){ severalObj[i].onclick=function(){......} })(i); }
上面创建了匿名函数,从而构建了一个新的作用域。匿名函数需要传一个参数,所以在执行的时候需要传一个参数。也正是通过这个参数维护了中间状态。
相关文章推荐
- JavaScript中mouseover和mouseout多次触发解决办法
- js通过定时器去显示当前时间及停止
- js定义数组
- javascript调试
- js 时间间隔执行函数
- JSTL的相关使用
- javascript模拟sleep
- 一个简单的弹性返回顶部JS代码实现介绍
- json之将json格式字符串数据转换为实体类.
- localStorage存储JSON对象的小方法
- javascript 得到当前日期、时间、星期,代码非常短
- 将Map转换成Class
- JavaScript实现阿拉伯数字和中文数字互相转换
- JS获取字符串长度(英文占1个字符,中文汉字占2个字符)
- js两个时间的计算得出最后的天数
- (JSP)给jsp前台页面传递参数给textarea文本框
- 谈谈对两种轻量级的存储数据方式XML和JSON的理解
- Javascript笔记——Javascript数据类型转换
- 原生JS实现AJAX
- JavaScript 动态添加行