javascript事件委托实现京东首页头部城市选择

什么是事件委托？

事件委托是利用事件的冒泡机制，把本来该加在某些元素上的事件，实际却加在了其父级或更外层的元素上。

最近拿京东首页练了练手，在京东首页的头部有一个城市选择，用到了Javascript的事件委托。

css和HTML代码部分

<style>
    *{margin: 0;padding: 0;list-style: none;font-style: normal;font-weight: normal;}
    #destination{ width: 97px;text-align: center; float: left; color: #666666;border-right: 1px solid transparent;
        height: 30px; position: relative; cursor: pointer;border-left: 1px solid transparent;margin-left: 20px;}
    #destination strong{display: inline-block; width: 95px; height: 30px; line-height: 30px;}
    #city{ width: 315px; position: absolute;top: 30px; left: -1px;;display: none;
        padding-top: 10px; padding-bottom: 10px; z-index: 10;}
    #city li{ height: 25px; width: 40px; line-height: 25px;text-align: center; float: left;
        margin:0 10px 0px 10px; font-size: 12px;cursor: pointer; }
    #city li:hover{background: #f1f1f1; color: #c91622; }
    #city .show{background: #B1191A !important; color: white !important; /*important为了覆盖鼠标移上的效果*/}
</style>

<div id="destination">
    <strong id="desstr">送至:<em id="selectedcity">北京</em></strong>
    <ul id="city">
        <li class="show">北京</li>
        <li>上海</li> <li>天津</li> <li>重庆</li> <li>河北</li> <li>山西</li>
        <li>河南</li> <li>辽宁</li> <li>吉林</li> <li>黑龙江</li> <li>内蒙古</li>
        <li>江苏</li> <li>山东</li> <li>安徽</li> <li>浙江</li> <li>福建</li>
        <li>湖北</li> <li>湖南</li> <li>广东</li> <li>广西</li> <li>江西</li>
        <li>四川</li> <li>海南</li> <li>贵州</li> <li>云南</li> <li>西藏</li>
        <li>陕西</li> <li>甘肃</li> <li>青海</li> <li>宁夏</li> <li>新疆</li>
        <li>台湾</li> <li>香港</li> <li>奥门</li> <li>海外</li>
    </u

js代码部分

<script>
    var destination = document.getElementById('destination');
    var selectedcity = document.getElementById('selectedcity');
    var desstr = document.getElementById('desstr');
    var city = document.getElementById('city');
    var lis1 = city.children;
    /*鼠标移入移除的样式改变*/
    destination.onmouseenter = function () {
        city.style.display = 'block';
        destination.style.borderLeft = '1px solid #dedede';
        destination.style.borderRight = '1px solid #dedede';
        desstr.style.height = '31px';
        desstr.style.position = 'absolute';
        desstr.style.left = '1px';
        desstr.style.zIndex = '40';
        desstr.style.background = '#fff';
        city.style.background = '#fff';
        city.style.border = '1px solid #dedede';
    }
    destination.onmouseleave = function () {
        city.style.display = 'none';
        desstr.style.background = '#F1F1F1';
        destination.style.borderLeft = '1px solid transparent';
        destination.style.borderRight = '1px solid transparent';
        desstr.style.height = '30px';
        city.style.border = 'none';
    }
    /*事件委托的方式添加点击事件*/
    destination.onclick = function (e) {
        var target = e.target || e.srcElement;//实现一般浏览器和IE浏览器的兼容，获取事件源
        if(target.nodeName == 'LI' && target.parentNode.id == 'city'){//判断鼠标点击的区域为li而不是空白或外部区域
            for(var i = 0 ; i < lis1.length ; ++i){//循环清除样式
                lis1[i].className = '';
            }
            target.className = 'show';
            selectedcity.innerHTML = target.innerHTML;
        }
    }
</script>