<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);
}

上面创建了匿名函数,从而构建了一个新的作用域。匿名函数需要传一个参数,所以在执行的时候需要传一个参数。也正是通过这个参数维护了中间状态。

转载:http://www.cnblogs.com/maxigang/p/5578040.html

js闭包解决多个点击事件的更多相关文章

  1. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  2. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. cocos2d-x JS 获取当前系统时间(解决屏幕双击点击事件)

    记录一下,好开心,感觉今天自己又学到东西了,对于屏幕双击事件本来还毫无头绪的,今天得以解决总算没白费加班,其实原理很简单:就是在点击事件里做一个判断,这个判断就是需要获取当前系统的时间的毫秒差,第一次 ...

  4. 利用闭包解决for循环里onclick事件不能捕捉实时i值问题

    问题描述 我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题, ...

  5. js动态替换数据的点击事件

    做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...

  6. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  7. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

  8. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  9. JS闭包导致循环给按钮添加事件时总是执行最后一个

    加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...

随机推荐

  1. php生成器yield

    上次说了php的生成器Iterator,这次说一下yield 迭代生成器 (迭代)生成器也是一个函数,不同的是这个函数的返回值是依次返回, 而不是只返回一个单独的值.或者,换句话说,生成器使你能更方便 ...

  2. vlan linux内核数据流程

    转:http://blog.sina.com.cn/s/blog_62bbc49c0100fs0n.html 一.前言 前几天做协议划分vlan的时候看了一些linux内核,了解不深,整理了下vlan ...

  3. 【转】Qt 资源图片删除后,错误 needed by `debug/qrc_image.cpp'. Stop. 的终极解决办法

    @2019-06-13 [小记] Qt项目做完了把资源文件夹下已经不用的图片文件删掉,运行时报错(编译不报错):No rule to make target `images/图片文件名', neede ...

  4. Vue快速学习_第四节

    获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...

  5. KMP算法详解&&P3375 【模板】KMP字符串匹配题解

    KMP算法详解: KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt(雾)提出的. 对于字符串匹配问题(such as 问你在abababb中有多少个 ...

  6. 《Python基础教程》第三章:使用字符串

    find方法可以在一个较长的字符串中查找子字符串.它返回子串所在位置的最左端索引.如果没有找到则返回-1 join方法用来在队列中添加元素,需要添加的队列元素都必须是字符串 >>> ...

  7. HNOI2004 树的计数 和 HNOI2008 明明的烦恼

    树的计数 输入文件第一行是一个正整数n,表示树有n个结点.第二行有n个数,第i个数表示di,即树的第i个结点的度数.其中1<=n<=150,输入数据保证满足条件的树不超过10^17个. 明 ...

  8. 《Learning Structured Representation for Text Classification via Reinforcement Learning》论文翻译.md

    摘要 表征学习是自然语言处理中的一个基本问题.本文研究了如何学习文本分类的结构化表示.与大多数既不使用结构又依赖于预先指定结构的现有表示模型不同,我们提出了一种强化学习(RL)方法,通过自动覆盖优化结 ...

  9. 题解 [HNOI2004]宠物收养场

    解析 这题似乎是裸的平衡树\(+\)模拟...于是用\(treap\)写了个板子. 看上去,我们似乎要维护两颗树(宠物和顾客), 然而,注意到,同一时间宠物点只有一类人(或物qwq), 所以,只要判断 ...

  10. Https Get Post

    #region Http 访问 public string GetHttpUrl(string Url) { try { HttpWebRequest request = (HttpWebReques ...