事件代理/事件委托----点击li弹出对应的下标和内容

<body>
    <ul>
        <li>这是第一行</li>
        <li>这是第二行</li>
        <li>这是第三行</li>
        <li>这是第四行</li>
        <li>这是第五行</li>
    </ul>
</body>

第一种：

    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;     // 给每个li赋一个下标 
        lis[i].onclick=function(){
            alert(this.index+"----"+this.innerHTML);
        };
    }

第二种：

    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        (function(n){
            lis[n].onclick=function(){
                alert(n+this.innerHTML);
            };
        })(i);
    }

第三种：

    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(n){
            return function(){
                alert(n+lis[n].innerHTML);
            };
        }(i);
    }

第四种：

    $("ul li").click(function(){
        var i=$(this).index();
        var text=$(this).text();
        alert(i+text);
    });

第五种：（事件代理）

    var ul=document.getElementsByTagName("ul")[0];
    ul.addEventListener("click",clickHandler);
    function clickHandler(e){
        if(e.target.nodeName!=="LI") return;    // 或者写 if(e.target.constructor!==HTMLLIElement) return;
        var arr=Array.from(ul.children);
        var index=arr.indexOf(e.target);
        var text=arr[index].innerHTML;
        console.log(index+text)
    }

第六种：（jq事件代理）

    $(function(){
        $("ul").click(function (e) {  
            var target=$(e.target);
            var index=target.index();
            var text=target.text();
            console.log(index+text)
        });
    });