事件处理优化 

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<ul id="ul">
    <li id="li1">qwe</li>
    <li id="li2">qwe</li>
    <li id="li3">qwe</li>
</ul>
</body>
<script type="text/javascript">
/*
    目标：
    点击每个li可以有三种不同的效果
*/
//优化前的代码
/*
    利用的就是传统的方式，在每一个需要处理的li上面添加上一个click
*/
    var li1 = document.getElementById('li1');
    li1.addEventListener("click",function(){
        li1.innerHTML = "兔子只吃胡萝卜";
    },false);
    var li2 = document.getElementById('li2');
    li2.addEventListener("click",function(){
        alert("by交易");
    },false);
    var li3 = document.getElementById('li3');
    li3.addEventListener("click",function(){
        location.href = "www.baidu.com";
    },false);

//优化后的代码
/*
    利用的就是事件的冒泡原理，在li的统一的父元素上添加一个click事件
    通过click事件的向上传递性，来获取对应的值
*/
    var ul = document.getElementById('ul');
    ul.addEventListener("click",function(event){
        switch(event.target.id){
            case "li1":
                event.target.innerHTML = "兔子只吃胡萝卜";
                break;
            case "li2":
                alert("by交易");
                break;
            case "li3":
                location.href = "www.baidu.com";
                break;
        }
    },false);
</script>
</html>

 

posted @ 2016-11-25 10:59  兔子只吃胡萝卜  阅读(197)  评论(0)    收藏  举报