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 ...
随机推荐
- [Objective-C语言教程]类别（28）
有时,可能会发现希望通过添加仅在某些情况下有用的行为来扩展现有类. 要向现有类添加此类扩展,Objective-C提供了类别和扩展. 如果需要向现有类添加方法,或许为了添加功能以便在应用程序中更容易地 ...
- P2278 操作系统
P2278 操作系统 题目描述 写一个程序来模拟操作系统的进程调度.假设该系统只有一个CPU,每一个进程的到达时间,执行时间和运行优先级都是已知的.其中运行优先级用自然数表示,数字越大,则优先级越高. ...
- Asp.net的生命周期之应用程序生命周期
参考:http://msdn.microsoft.com/zh-cn/library/ms178473(v=vs.100).aspx 参考:http://www.cnblogs.com/JimmyZh ...
- Github如何在本地创建一个空的仓库
1.在任意地方创建文件夹,并进入该文件夹: 2.通过git init命令把该文件夹变成Git可管理的仓库: 3.该文件夹里会多了个.git文件夹,它是Git用来跟踪和管理版本库的: 4.这时候手动把项 ...
- hiho#1445 重复旋律5 求子串数量 后缀自动机
题目传送门 题意:给出一个字符串,求子串的个数. 思路:后缀自动机的题真是每做一题就更理解一些. SAM中的每一状态$p$都代表了一种子串,而p包含的字符串的个数是$len[p]-len[fa[p]] ...
- 云服务器、vps、虚拟主机的区别
云服务器 Elastic Compute Service, 简称ECS 好多人理解云服务器和VPS一样,更有甚者说以前的VPS现在的说法就是云服务器,其实不然,云服务器是一个计算,网络,存储的组合.简 ...
- OpenERP 中的on_change方法总结
1.xml中应为on_change=""的形式 2.py文件中 self,cr,uid,ids为必备参数,后面的参数根据xml文件中的参数的数量而定 3.return的是一个字典, ...
- WCF系列教程之WCF客户端调用服务
1.创建WCF客户端应用程序需要执行下列步骤 (1).获取服务终结点的服务协定.绑定以及地址信息 (2).使用该信息创建WCF客户端 (3).调用操作 (4).关闭WCF客户端对象 二.操作实例 1. ...
- LeetCode-2. Add Two Numbers(链表实现数字相加)
1.题目描述 You are given two non-empty linked lists representing two non-negative integers. The digits a ...
- Swagger与SpringMVC项目整合
Swagger与SpringMVC项目整合 来源:http://www.2cto.com/kf/201502/376959.html 为了方便的管理项目中API接口,在网上找了好多关于API接口管理的 ...