点击每一项alert出对应的索引号

时间 2019-12-25
原文原文链接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>点击每一项alert出对应的索引号</title>
</head>
<body>
<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
</body>
<script type="text/javascript">
    /**
     *原理，用不一样的方法记录每次循环的i的值
     * */
    window.onload=function(){
        var oUl=document.getElementById("test");
       var oLi=oUl.getElementsByTagName("li");
        /*start one+++++++++用闭包的方法实现*/
        for(var i=0;i<oLi.length;i++){
            (function(i){
                oLi[i].onclick=function(){
                    alert(i);
                    console.log(i);
                }
            }(i));
        }
        /*end one*/
        /*start two+++++++++++用事件委托的方法实现  此方法在chrome浏览器下使用，没写兼容其余浏览器的事件*/
//        oUl.addEventListener("click",function(e){
//            for(var i=0;i<oLi.length;i++){
//                oLi[i].index = i;//索引号
//            }
//            alert(e.target.index);
//        },false);
        /*end two*/
    }
</script>
</html>