点击列表使用闭包显示出当前索引 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
       window.onload=function init(){
            var lis=document.querySelectorAll("#text li");
            for(var i=0;i<lis.length;i++){
                lis[i].onclick=(function(i){
                    return function(){
                        alert(i);
                    };
                })(i)
            }
        }
    </script>
</head>
<body>
<ul id="text">
    <li>这是第一个li</li>
    <li>这是第二个li</li>
    <li>这是第三个li</li>
</ul>
</body>
</html>

1.首先在遍历数组进行绑定onclick事件的时候，把当前的i传入事件函数中，并保存下来了。
2.把换行去掉后，在看看当前绑定的函数lis.onclick=(function(i){return function(){alert(i);};})(i)
3.当点击对应li元素的时候，事件函数返回一个function(){alert(i);}这样的方法。
4.但因为外层的function是一个自调函数，所以实际上应该是这样的(function(){alert(i);})(i)
5.所以输出的结果就是对应li数组中的下标。

posted @ 2016-09-28 16:13  terytang  阅读(637)  评论(0)  编辑  收藏  举报