JS给元素循环添加事件的问题
2023-09-14 08:59:53 时间
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li> </ul>
使用js为多个未知数量的li循环添加事件的时候很容易想到如下代码
for( var i= 0,lis = document.getElementsByTagName("li"),len=lis.length; i<len;i++){ lis[i].onclick = function(){ alert(i); } }
但是每次点击都会执行最后一次的结果 alert弹出4
因为在for循环里面指定给lis[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。
那现在原因是知道了,如何来避免这种情况呢?
既然已经知道函数调用外部变量的时候就构成了一个闭包,里面的变量会受到别的地方的影响,那么我们
现在要做的就是,构建一个只有自己本身才可访问的闭包,保存只供本身使用的变量
构建一个闭包很简单,代码如下:
for( var i= 0,lis = document.getElementsByTagName("li"),len=lis.length; i<len;i++){ (function(i){ lis[i].onclick = function() { alert(i); } })(i); }
相关文章
- JS框架_(JQuery.js)模拟刮奖
- JS进度条顺滑版实现
- 【华为云技术分享】如何快速实现鲲鹏弹性云服务器Node.js部署和高可用性?
- JS本地存储信息的实现方式(localStorage 与 userData)
- js原生触发事件
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
- JS中undefined和null的区别
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit.android js 的键盘按键检测Back键Home键和Menu键事件
- Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面
- js手机端长按选中文字执行事件
- js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
- js setTimeout 错误捕获
- js绑定事件代理的坑
- Js 模拟鼠标点击事件
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- bryntum Kanban Task Board 5.1.0 JS 看板
- JS工具方法 4 伪元素点击事件实现的两种方法