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

請問怎么把鼠標事件和鍵盤事件保持同步呢

<!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;
??
??? // 點擊三角時
??? title.onclick=function(event){
????? // 執(zhí)行腳本
?? event=event||window.event;
?? menu.style.display='block';
?? event.stopPropagation();
??? };
???
?? // 滑過滑過、離開、點擊每個選項時
????? // 執(zhí)行腳本
?for( var i=0;i<as.length;i++){
??as[i].onmouseover=function(){
??????? ?this.style.background="#ccc";
???index=i;
??????? }
??as[i].onmouseout=function(){
???????? this.style.background="none";
???index=-1;
??????? }
?? as[i].onclick=function(){
????? title.innerHTML=this.innerHTML;
???index=-1;
??}

?}
???? document.onkeyup=function(event){
???alert(index);
??????? var e=event||window.event;
??????? if(e.keyCode==38){
??????????? index=index-1;
??????????? if(index<0){
??????????????? index=(as.length)-1;
??????????? }
??????????? for(var i=0,l=as.length;i<l;i++){
??????????????? if(i==index){
??????????????????? as[index].style.background='#ccc';
??????????????? }else{
??????????????????? as[i].style.background='white';
??????????????? }??
??????????? }??
??????? }else if(e.keyCode==40){
??????????? index=index+1;
??????????? if(index>as.length-1){
??????????????? index=0;
??????????? }
??????????? for(var i=0,l=as.length;i<l;i++){
??????????????? if(i==index){
??????????????????? as[index].style.background='#ccc';
??????????????? }else{
??????????????????? as[i].style.background='white';
??????????????? }??
??????????? }??
??????? }else if(e.keyCode==13){
??????????? menu.style.display='none';
??????????? title.innerHTML=as[index].innerHTML;
??????????? index=-1;
??????? }
??? }
?? // 點擊頁面空白處時
?????? // 執(zhí)行腳本
??? 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開發(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>