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 ...
随机推荐
- GraphQL 如何取代 Redux
简评:使用 GraphQL 可以大大简化客户端状态管理部分的代码. ⚛️切换到React 故事背景:在 2016 年,Pathwright 的前端团队就开始将客户端的代码从 Backbone & ...
- C++实现二叉树的相应操作
1. 二叉树的遍历:先序(递归.非递归),中序(递归.非递归),后序(递归.非递归). #include <iostream> #include <string> #inclu ...
- CentOS7系统安装 Maria Db（MYSQL）教程
一.背景Maria Db是流行的跨平台MySQL数据库管理系统的分支,被认为是MySQL 的完全替代品.Maria Db是由Sun在Sun Micro systems合并期间被Oracle收购后,于2 ...
- 使用 Hexo + github 搭建个人博客
来自:http://www.cnblogs.com/fengzheng/p/8031518.html Hexo 是什么 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或 ...
- ubuntu15.04中安装mysql和mysql-workbench
本文主要讲解mysql在ubuntu中的安装和使用,以及mysql workbench的安装和使用.mysql是一个开源的数据库软件,甲骨文的一个产品,是一个性能较好的数据库软件.mysql work ...
- 48.rocketMQ
一.简介 RocketMQ是阿里旗下的一款产品,分为开源版本和非开源版本.相比于ActiveMQ,RocketMQ支持顺序消费.事务机制.失败重试机制.消息可查询.消息订阅.较强的水平扩展能力.亿级堆 ...
- SUSE Linux Enterprise Server设置IP地址、网关、DNS
说明: ip:202.118.83.247 子网掩码:255.255.255.0 网关:202.118.83.2 dns:8.8.8.8 / 8.8.4.4 1.设置ip $ vi /etc/sysc ...
- html网页如何传递接收地址参数?
实现html页面的参数传递 方法一: 下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数. 有了这个函数,就可以在页面之间传递参数 ...
- Struts2 extends用法
1.创建一个struts-extends.xml文件 <?xml version="1.0" encoding="UTF-8"?> <!DOC ...
- Velocity初始化过程解析
velocity就是由template,engine,context组成. 1.首先创建一个template(如果是用在web上就是一个html文件),将需要参数化或实例化的地方用跟context有关 ...