js循环添加事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
    　　<li>香蕉</li>
    　　<li>苹果</li>
        <li>菠萝</li>
    　　<li>猕猴桃</li>
    　　<li>芒果</li>
    </ul>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
    var itemli = document.getElementsByTagName("li");
//方法一：
//    for(var i =0;i<itemli.length;i++){
//        itemli[i].index = i;
//        itemli[i].onclick = function () {
//            console.log(this.index+this.innerHTML);
//        }
//    }

//    方法二：
//    for(var i = 0; i<itemli.length; i++){
//
//        (function(n){
//
//            itemli[i].onclick = function(){
//
//                console.log(n+itemli[n].innerHTML);    //   索引值从0开始
//
//            }
//
//        })(i)
//
//    }

//    方法三：
//    for(var i = 0; i<itemli.length; i++){
//        itemli[i].onclick = function(n){
//            return function(){
//                console.log(n+itemli[n].innerHTML);    //  \n换行   索引值从0开始
//            }
//        }(i)
//    }

//    方法四：
    $("ul li").click(function () {
        var item = $(this).index();
        var textword = $(this).text();
        console.log(item+textword);
    })
</script>

 2.考虑到如果li是动态的添加；

可以把事件绑定在ul上，多次的事件不用在每个li绑定，而是用on一次绑定在ul上，提高了性能；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
</body>
</html>
<script type="text/javascript">
    $("ul").on("mouseover",function(e){
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
    });
</script>

 

posted @ 2016-11-28 10:34  最爱小虾  阅读(562)  评论(0)  编辑  收藏  举报