                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

window.onload里面的函數(shù)的順序

<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>下拉菜單</title>
????<style?type="text/css">
????????body,ul,li{?margin:0;?padding:0;?font-size:13px;}
????????ul,li{list-style:none;}
????????#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
????????#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
????????????padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;
????????????background:url(xjt.png)?no-repeat?right?center;}
????????#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
????????#divselect?ul?li{height:24px;?line-height:24px;}
????????#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????????var?box=document.getElementById('divselect'),
????????????????????title=box.getElementsByTagName('cite')[0],
????????????????????menu=box.getElementsByTagName('ul')[0],
????????????????????as=box.getElementsByTagName('a'),
????????????????????index=-1;
????????????function?clearback(){
???????????????for(var?i=0;i<as.length;i++){
???????????????????as[i].style.background='#fff';
???????????????}
????????????}
????????????//?點擊三角時
????????????title.onclick=function(event){
????????????????event=event||window.event;
????????????????if(event.stopPropagation){
????????????????????event.stopPropagation();
????????????????}else{
????????????????????event.cancelBubble=true;
????????????????}
????????????????menu.style.display='block';
????????????}
????????????for(var?i=0;i<as.length;i++){
????????????????as[i].onmouseover=function(){
????????????????????this.style.background='#ccc';
????????????????????index=this.getAttribute('selectid')-1;
????????????????}
????????????????as[i].onmouseout=function(){
????????????????????this.style.background='#fff';
????????????????}
????????????????as[i].onclick=function(){
????????????????????title.innerHTML=this.innerHTML;
????????????????????menu.style.display='none';
????????????????????index=-1;
????????????????????clearback();
????????????????}
????????????}

????????????document.onclick=function(){
????????????????menu.style.display='none';
????????????????index=-1;
????????????????clearback();
????????????}
????????????document.onkeyup=function(event){
????????????????//?滑過滑過、離開、點擊每個選項時
????????????????event=event||window.event;
????????????????if(event.keyCode==40){
????????????????????index++;
????????????????????if(index>=as.length){index=0}
???????????????????clearback();
????????????????????as[index].style.background='#ccc';
????????????????}else?if(event.keyCode==38){
????????????????????index--;
????????????????????if(index<0){index=as.length-1;}
????????????????????clearback();
????????????????????as[index].style.background='#ccc';
????????????????}else?if(event.keyCode==13&&index!=-1){
????????????????????menu.style.display='none';
????????????????????title.innerHTML=as[index].innerHTML;
????????????????????index=-1;
????????????????????clearback();
????????????????}


????????????}
????????}
????????//?點擊頁面空白處時
????????//?執(zhí)行腳本
????</script>
</head>
<body>
<div?id="divselect">
????<cite>請選擇分類</cite>
????<ul>
????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發(fā)</a></li>
????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
????</ul>
</div>
</body>
</html>