JS视频:事件第四讲:事件传播应用的实例--网页菜单切换效果

作者:日期:2011-06-21 23:24:57 点击:298

我们理解了事件的传播的原理,但还不知道他有什么实际的意义,通过这个实用性很强的例子,我们可以具体的学习一下捕获或冒泡的实际意义。

实例的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.change{ float:left;}
.togglecity{ cursor:pointer; height:24px;line-height:24px; padding:0 10px; }
.citylist{ position:absolute; z-index:11111; padding:5px; background:#515151; width:280px; display:none;}
ul{ list-style:none; padding:0; margin:0;}
ul.listcity li{ float:left; width:70px;}
ul.listcity a{ display:block; text-align:center; padding:2px 5px; color:#fff; font-size:14px;}
ul.listcity a:hover{ background:#666; color:#CF0;}
</style>

<script type="text/javascript" language="javascript">

</script>


<body>

 <div class="city" style="position:relative; z-index:11111;">
            <h2><span id="city">北京</span></h2>
            <!--切换城市开始-->
             <div class="change">
                 <span id="togglecity"  class="togglecity">切换城市</span>
                <div id="citylist" class="citylist">
                    <ul class="listcity">
                        <li><a href="">澳门</a></li>
                        <li><a href="">北京</a></li>
                        <li><a href="">长春</a></li>
                        <li><a href="">长沙</a></li>
                        <li><a href="">澳门</a></li>
                        <li><a href="">北京</a></li>
                        <li><a href="">长春</a></li>
                        <li><a href="">长沙</a></li>
                    </ul>
                </div>
             </div>            
             <!--切换城市结束-->
        </div>
       
</body>
</html>

 

上一篇: JS视频:事件第三讲:事件的传播、冒泡、捕获等

下一篇: JS视频:事件第五讲:DOM 2级事件绑定