相比很多人都遇见过这样的情况: 给一个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. Vim——替换命令

     原创声明:本文系博主原创文章,转载或引用请注明出处. 1. 文本替换 #替换每一行的第一个a :%s/a/b/ #全部替换 :%s/a/b/g #替换/时需要转义"\/" 2. ...

  2. [易学易懂系列|rustlang语言|零基础|快速入门|（22）|宏Macro]

    [易学易懂系列|rustlang语言|零基础|快速入门|(22)|宏Macro] 实用知识 宏Macro 我们今天来讲讲Rust中强大的宏Macro. Rust的宏macro是实现元编程的强大工具. ...

  3. Python学习笔记：序列构成的数组

    列表推导是一种构建列表(list)的快捷方式 #列表推导 symbols = '!@#$%' codes = [ord(symbol) for symbol in symbols] #ord()Pyt ...

  4. nginx跨站访问，防盗链

    跨站访问 从网站A利用AJAX跨站访问网站B 浏览器会根据服务端返回的头部信息(Access-Control-Allow-Origin)判断是否允许跨域访问.如果服务端都允许跨站访问,浏览器段也就没必 ...

  5. JSP页面的Page指令指定编码和Meta标签编码

    JSP代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  6. Java 实现在固定区间内随机生成整数

    1.random.nextInt(num) public static void main(String args[]) { Random rdom = new Random(); int max = ...

  7. codevs 2010 求后序遍历x

    题目描述 Description 输入一棵二叉树的先序和中序遍历序列,输出其后序遍历序列. 输入描述 Input Description 共两行,第一行一个字符串,表示树的先序遍历,第二行一个字符串, ...

  8. Python基础之算术运算符

    如下图所示, 假设变量a = 10, b = 20:

  9. Gitlab启动、停止、重启（两种启动方式）

    因为Gitlab不是我部署的,是之前总监部署的,服务器突然更新系统了,Git服务器就没有自启··自启··自启······,自己操作启动没有成功,然后网上搜了一下都是这三种启动关闭重启的方式,可是我这里 ...

  10. R-ets()

    前情需知 指数预测模型 指数模型是用来预测时序未来值的最常用模型.这类模型相对比较简单,但是实践证明它们的短期预测能力较好.不同指数模型建模时选用的因子可能不同.比如 单指数模型(simple/sin ...