js 闭包解决方案

相比很多人都遇见过这样的情况: 给一个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 闭包解决方案

最新文章

热门文章