js闭包解决多个点击事件
<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闭包解决多个点击事件的更多相关文章
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- JS实现按下按键触发点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- cocos2d-x JS 获取当前系统时间(解决屏幕双击点击事件)
记录一下,好开心,感觉今天自己又学到东西了,对于屏幕双击事件本来还毫无头绪的,今天得以解决总算没白费加班,其实原理很简单:就是在点击事件里做一个判断,这个判断就是需要获取当前系统的时间的毫秒差,第一次 ...
- 利用闭包解决for循环里onclick事件不能捕捉实时i值问题
问题描述 我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题, ...
- js动态替换数据的点击事件
做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- vue中解决拖动和点击事件的冲突
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- JS闭包导致循环给按钮添加事件时总是执行最后一个
加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...
随机推荐
- odoo xml中添加数据的数字代表含义
参考原文:https://alanhou.org/odoo12-import-export-data/ <?xml version="1.0"?> <odoo n ...
- 05-【session、cookie】
session.cookie 1.HttpSession概述>HttpSession是由JavaWeb提供的,用来会话跟踪的类.session是服务器端对象,保存在服务器端!!!>Http ...
- WiFi 6是否适合个人用户
5G已经被热炒得家喻户晓,但与其对标的WiFi新技术标准——Wi-Fi 6却可能有着更好的经济和技术前景,WiFi 6也称为802.11ax,比过去的Wi-Fi技术更好,速度更快能跟5G对标,连接性更 ...
- Boost::pool (1)
POOL 什么是pool 池分配是一种非常快速的内存分配方案,但其使用受到限制.有关池分配的更多信息(也称为简单隔离存储,请参阅 池化概念和简单隔离存储). 我为什么要使用Pool? 使用池可以更好地 ...
- docker run always
https://www.cnblogs.com/kaishirenshi/p/10396446.html
- 初识 MQTT——IBM
为什么 MQTT 是最适合物联网的网络协议 官方网址: http://mqtt.org/ Michael Yuan2017 年 6 月 14 日发布 WeiboGoogle+用电子邮件发送本页面 0 ...
- linux命令集锦 基于centos7---优化linux的命令
sed -i ‘s###g’ /etc/selinux/config 3个# 用于更改selinux配置文件:sed -i 's#SELINUX=enforcing#SELINUX=disabled ...
- Servlet中的请求转发RequestDispatcher接口的forword与Include的区别
RequestDispatcher接口中具有两个方法: forward() 与 include() 均 可完成请求 的转发.区别如下: forword(): 使用该方法,则当前 的 Servlet 中 ...
- webpack-dev-server 和 html-webpack-plugin的使用
webpack-dev-server的作用:自动编译 1.webpack-dev-server的使用 1)cnpm i webpack-dev-server -D 2)在package.json中配置 ...
- LabVIEW:可执行文件运行缺少运行库问题
造冰箱的大熊猫@cnblogs 2018/5/11 上周调试设备网口犯了一个低级错误,今天又搞出一个笑话 目标机上没有LabVIEW开发环境,于是在开发机上将VI打包成可执行程序.在目标机上运行可执行 ...