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

来源：互联网发布：c语言有一个函数编辑：程序博客网时间：2024/06/05 14:11

什么是事件委托？

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

最近拿京东首页练了练手，在京东首页的头部有一个城市选择，用到了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>

0 0