                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

鍵盤事件未能調用，鼠標事件出現小bug；看不出的問題所在求大神

<!DOCTYPE>
<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{
????position:relative;
????width:200px;
????color:#a19595;
????margin:0px?auto;
????z-index:10000;
}
#divselect?cite?{
????width:180px;
????height:30px;
????line-height:30px;
????color:#a19595;
????cursor:pointer;
????display:block;
????border:1px?solid?black;
????padding-left:2px;
????padding-bottom:5px;
}

#divselect?ul{position:absolute;
z-index:20000;
width:182px;line-height:30px;
margin-top:-1px;
background-color:#fff;
border:1px?solid?#333333;
display:none;
}
#divselect?ul?li{height:20px;line-height:20px;}
a{text-decoration:none;diaplay:block;
height:24px;
color:#333333;
padding-right:5px;
padding-left:5px;
}

????
????????
????</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;
???
????//?點擊三角時
????title.onclick=function(event){
????????event=event||window.event;
????????if(event.stopProgation){event.stopProgation();}
????????else{event.cancelBubble=true;}???//?執行腳本
????????//jp
????????menu.style.display="block";
????????//鍵盤事件未能成功調用//
????????document.onkeyup=function(event){
????????event=event||window.event;
????????if(event.keyCode==13){
????????????for(var?i=0;i<as.length;i++){
????????????????as[i].style.background="#fff";
????????????}
????????????title.innerHTML=as[index].innerHTML;
????????????menu.style.display="none";
????????}
????????
???if(evnet.keyCode==40){
???????index++;
???????if(index>=as.length){index=0;}
???????for(var?i=0;i<as.length;i++){
???????????as[i].style.background="#ccc";???????????
???????}
???????as[index].style.background="#fff";
???}
??else?if(event.keyCode==38){
??????index--;
??????if(index<0)?index=as.length-1;
???????for(var?i=0;i<as.length;i++){
???????????as[i].style.background="#fff";
???????}
???????as[index].style.background="#ccc";
???}
????????}
????}??
????//mouse
??for(var?i=0;i<as.length;i++){
??????as[i].num=i;
??????as[i].onmousemove=function(){
??????????this.style.background="#fff";
??????????index=as[i].num-1;
??????}
??????as[i].onmouseout=function(){
??????????this.style.background="#9a9a9a";
??????}
??????as[i].onclick=function(event){
??????event=event||window.event;
????????if(event.stopProgation){event.stopProgation();}
????????else{event.cancelBubble=true;}
????????menu.style.display="none";
????????title.innerHTML=this.innerHTML;
??????}
??}
????
???document.onclick=function(){
???????menu.style.display="none";
???}
??//點擊空白處??
?}??
????</script>
????</head>
????<body>
????????<div?id="divselect">
????????????<cite>請選擇分類</cite>
????????????<ul>?????
?????????<li?id="li">?<a?href="javascript:;"?selectid="1">ASP開發</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
?????</ul>
????????</div>
????</body>
????
</html>