相比很多人都遇见过这样的情况: 给一个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. 【转载】MCMC和Gibbs Sampling算法

    转载随笔,原贴地址:MCMC和Gibbs Sampling算法 本文是整理网上的几篇博客和论文所得出来的,所有的原文连接都在文末. 在科学研究中,如何生成服从某个概率分布的样本是一个重要的问题.如果样 ...

  2. PHP代码执行流程

    怎么样?有点了解了么.说实话,单看这个,我本人是有点懵的,不过,不要怕.咱们来慢慢地看下. 首先,在网上找的信息说PHP代码执行的顺序是这样的,第一步是词法分析,第二步是语法分析,第三步是转化为opc ...

  3. 关于GRPC的讲解

    gRPC服务发现&负载均衡 https://segmentfault.com/a/1190000008672912?utm_source=tag-newest GRPC编程指南 gRPC 介绍 ...

  4. Hutools之http工具类

    Hutools请求网络资源使用的工具类:HttpRequest和HttpResponse Get方式请求数据 Get方式请求数据Map<String,Object> paramMap = ...

  5. HTML5的快捷方式

    ctrl + /  单行注释 ctrl + shift + /   块注释 ctrl + shift + “+”   展开 ctrl + shift + “-”  折叠 ctrl + alt + L  ...

  6. Laravel技巧集锦（16）：使用DB::listen查找慢SQL

    1.AppServiceProvider.php中 \DB::listen(function ($query){ $sql = $query->sql; $bindings = $query-& ...

  7. java 面试题摘要

    5.1 什么是线程 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程的实际运作单位, 可以使用多线程对运算提速. 5.2 线程和进程有什么区别 (1)进程是资源的分配和调度的一个独 ...

  8. 题解 【NOIP2016】魔法阵

    [NOIP2016]魔法阵 Description 六十年一次的魔法战争就要开始了,大魔法师准备从附近的魔法场中汲取魔法量. 大魔法师有m个魔法物品,编号分别为1,2,...,m.每个物品具有一个魔法 ...

  9. Java基础重点

    几个比较重要基础的,以后用到概率比较大的合集. 第一个,是获取时间以字符串形式输出的,用到了Date类.simpleDateFormat类的方法.贴图: 第二个是字符串转时间类型的,与上一个相似,不过 ...

  10. vue 剪切图片上传头像，使用 cropperjs 实现

    我使用的是vue,移动端的项目. 官网地址:cropperjs GitHub地址:https://github.com/fengyuanchen/cropperjs/blob/master/READM ...