<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. Java学习笔记【十三、多线程编程】

    概念 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线 ...

  2. fastadmin 隐藏操作栏按钮

    formatter: function (value, row, index) { var that = $.extend({}, this); $(table).data({"operat ...

  3. Delphi MSComm控件属性

  4. Java面向对象(三) 【面向对象深入:抽象类,接口,内部类等】

    面向对象(Object Oriented) 1.抽象类抽象就是将拥有共同方法和属性的对象提取出来.提取后,重新设计一个更加通用.更加大众化的类,就叫抽象类.1)abstract 关键字修饰类.方法,即 ...

  5. IO[File_API学习]

    IO流[File_API学习的使用] File_API学习的使用1.名称分隔符 /  \ separatorjava下路径:\ 在Windows下的路径,在java里 \ 是转义字符.需要 \\Str ...

  6. Oracle【增删改&数据的备份】

    增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...

  7. python面向编程:面向对象、init、绑定方法、案例练习

    一.类的定义 二.面向对象概念三.对象的使用四.__init__函数的使用五.绑定方法六.面向对象联系 一.类的定义 1.什么叫做类? 类就是分类,类型的意思,一堆具备相同特征和行为的事物的抽象概念 ...

  8. C++ SQLite的使用总结

    SQLite3简介 SQLite3只是一个轻型的嵌入式数据库引擎,占用资源非常低,处理速度比Mysql还快,专门用于移动设备上进行适量的数据存取,它只是一个文件,不需要服务器进程. SQL语句是SQL ...

  9. linux内核 同步

    锁 linux本身实现了集中锁机制,各种锁机制之间的差别是,当锁已经被其他线程持有的时候,一些锁使用自旋的方式来等待,另外一些锁会当当前线程改变为睡眠状态然后等待被唤醒. 锁的争用 如果一个锁处于高度 ...

  10. top命令经常用来监控linux的系统状况,比如cpu、内存的使用,程序员基本都知道这个命令。 按 q 退出

    top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令. 按 q 退出