js for循环中点击事件中无法获取每一个i值的问题
好像是第二次遇到这个问题，必须要总结一下！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li{
width: 100px;
height: 50px;
background-color: red;
margin-bottom: 10px;
}
</style>
<body>
<ul id="ulList">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i);
} }
</script>
</body>
</html>
如果按照以上方法，无论点击哪一个li标签，i的值都会是4，并不能像我们所想的那样打印出0,1,2,3，原因是什么呢？
暂时也不太清楚，好像涉及闭包，因为也没学到，就参考别人回答总结一下。
for循环是一个外部闭包，依次绑定的点击事件是一个函数实例，也产生了一个闭包域，它引用了外部闭包的变量i，外部闭包域中i的最终值为4，点击事件触发时引用外部闭包变量i（此时i=4），所以输出的值全为4。
暂时先写两种自己能掌握的解决方法：
方法一：在for循环中点击事件外套一个自执行的匿名函数，将索引变量i保存到匿名函数的形参中
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(arg){
lis[i].onclick = function(){
console.log(arg);
}
})(i);
}
</script>
方法二：在for循环中，为每一个要点击的对象创建属性用来保存索引变量i
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].i = i; //创建属性保存变量i
lis[i].onclick = function(){
console.log(this.i);
// console.log(lis[i].i);绝对不能这样写,要不然 Uncaught TypeError: Cannot read property 'i' of undefined
}
}
</script>
js for循环中点击事件中无法获取每一个i值的问题的更多相关文章
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
- Android中点击事件的四种写法详解
Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
- android中点击事件的4种写法
android中获取到一些控件(比如说按钮)时,一般会为其添加点击事件,android中的点击事件一共有4中写法. 假设在布局文件中声明如下 ....... <Button android:la ...
- 在CTreeCtrl控件点击事件中获取点击的项
网上搜了一下,有两种方法: 1.使用GetSelectedItem() HTREEITEM hItem = m_treeCtrl.GetSelectedItem(); CString strText ...
- js input radio点击事件
html代码: <input type="radio" name="myname" value="1" />1 <inpu ...
- ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件（阻止事件冒泡）
闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...
- 【JSP EL】<c:if> <c:foreach >EL表达式 获取list长度/不用循环,EL在List中直接获取第一项的内容/EL获取Map的键,Map的值
1.EL表达式 获取list长度 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" ...
- js sort方法根据数组中对象的某一个属性值进行排序（实用方法）
js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...
随机推荐
- leetcode 198 打家劫舍 Python 动态规划
打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定 ...
- myeclipse控制台打印文字
先来看看效果图: 下面是代码: import java.awt.Font; import java.awt.Shape; import java.awt.font.FontRenderContext; ...
- 总结day12 ----装饰器
一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...
- D01——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D01 20180705内容纲要: 1 PYTHON介绍 2 PYTHON变量定义规则 3 PYTHON文件结构 4 PYTHON语句及语法 5 字符编码 6 ...
- 解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column 'headline' at row 1")
解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column ...
- remote link Centos6.6 Horrible Slow
客户端win7 , 本地直连,secureCRT连接Centos6.6 速度巨慢,FTP tool almost cannot link in. 即使用cmd ftp 也是反应30s以上.
- 查看Postgresql的连接状况
今天遇到一个问题,就是pg一直报错,说有太多的客户端连接到数据库上面.但现在不知道是什么程序连接.pg默认的max_connection是100,我并没有修改过,以为平时公司内部用,应该够了,但现在貌 ...
- redux在componentDidMount中出现的问题 --- state 不变
遇到这样一个问题: 在组件的componentDidMount中,我需要使用到redux中存储的某个状态. 但是有趣的是,当我再render中使用相同的状态时,状态会改变,但是在conponentDi ...
- 找到MySQL配置文件默认路径
如果不知道当前使用的配置文件的路径,可以尝试下面的操作: # which mysqld /usr/local/mysql/bin/mysqld # /usr/local/mysql/bin/mysql ...
- redis 数据库迁移
老大让把 一台机器上 redis 中所有的数据,迁移到另一台机器上 查了一下可以拷贝 rdb 文件, 此方法只适用于迁移到一个新的库, 迁移到正在使用的库就不行了, 而且 rdb 里面是所有的 db, ...