相比很多人都遇见过这样的情况: 给一个ul的所有li绑定行为，在点击时获取其index。

假设结构如下:

<body>

    <ul>

        <li>0</li>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</body>

很多人会这么做:

var list= document.querySelectorAll('ul li')

for(var i= 0; i< list.length; i ++){

    list[i].addEventListener('click', function(){

        console.log(i)

    })

}

结果输出的全是5，这便是闭包的最常见的出现情形。

解决方案:

1.利用let块级作用域的特性

var list= document.querySelectorAll('ul li')

for(let i= 0; i< list.length; i ++){

    list[i].addEventListener('click', function(){

        console.log(i)

    })

}

2.利用自执行函数独立作用域，也是红宝书里推荐的写法

var list= document.querySelectorAll('ul li')

for(var i= 0; i< list.length; i ++){

    (function(i){

        list[i].addEventListener('click', function(){

            console.log(i)

        })

    }(i))

}

3.利用事件委托机制(只适用于li内没有其余元素的情况)

var list= document.querySelector('ul')
list.onclick= function(e){
    var e= window.event||e
    var target= e.target||e.srcElement
    if(target.nodeName.toLowerCase()== 'li'){
        console.log([].indexOf.call(document.querySelectorAll('li'), target))
    }
}

js 闭包解决方案的更多相关文章

  1. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  2. js闭包实例汇总

    本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...

  3. 深入贯彻闭包思想，全面理解JS闭包形成过程

    谈起闭包,它可是JavaScript两个核心技术之一(异步和闭包),在面试以及实际应用当中,我们都离不开它们,甚至可以说它们是衡量js工程师实力的一个重要指标.下面我们就罗列闭包的几个常见问题,从回答 ...

  4. JS闭包的理解及常见应用场景

    JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...

  5. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  6. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  7. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  8. js闭包之初步理解（ JavaScript closure）

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  9. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. SQL语句 case ... when

    select 字段A, 字段B, CASE WHEN t.operate = 1 then 'aa'WHEN t.operate = 2 then 'bb'WHEN t.operate = 3 the ...

  2. BZOJ4353 Play with tree[树剖]

    复习几乎考不到的树剖.维护min以及min个数,打set和add标记即可,注意set优先级优于add. #include<iostream> #include<cstdio> ...

  3. Ubuntu系统没声音

    问题: http://www.linuxdiyf.com/linux/22936.html $aplay -l 得到下面的信息ubuntu  aplay: device_list:268: no so ...

  4. 重新学习ESP32(零)之环境搭建——转载——windows平台

    原文来自:https://www.makingfun.xyz/2018/09/18/esp32-hello-world/ 前言 前几天看到乐鑫的公众号推送了一篇文章,说是ESP8266最新的SDK风格 ...

  5. sql——limit

    PageHelper: https://blog.csdn.net/baidu_38083619/article/details/82463058 Sql执行顺序: https://blog.csdn ...

  6. Remote API（RAPI）之 文件管理

    RAPI库由一组函数组成,这些函数可用于通过桌面应用程序管理设备,包括设备的目录文件.设备的注册表和系统信息. RAPI提供了一组文件管理方法 CeCopyFile:复制文件 CeCreateDire ...

  7. java上传超大文件解决方案

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/1269085759/up6-jsp-mysq ...

  8. 关于windows 设备驱动重要的事实

    1. windows采用设备树描述所有挂在系统总线上的设备,每个设备对应一个节点. 2.每个设备有自己的device object stack/driver stack. 一个物理上的设备对应多个de ...

  9. sh_21_遍历字典的列表

    sh_21_遍历字典的列表 students = [ {"name": "阿土"}, {"name": "小美"} ] ...

  10. Sql Server 基本使用

    一.登录sql server数据库 1.若需要连接本机数据库服务器,服务器名可以采用“local”.“.”“本机Ip”. 2.在连接sql server 之前,确保sql server服务已经启动,如 ...