JS-事件之鼠標、鍵盤都能控制的下拉選框效果

<script type="text/javascript">
window.onload=function(e){
    var box=document.getElementById('divselect'),
        title=box.getElementsByTagName('cite')[0],
        menu=box.getElementsByTagName('ul')[0],
        as=box.getElementsByTagName('a'),//as是一個集合
        index=-1;
   
    // 點擊三角時
    title.onclick=function(event){
        event = event || window.event;
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        };//以上是阻止冒泡的判斷語句
        menu.style.display = "block";
      
      //添加鍵盤事件
      //問題出在按了回車之后，怎么把對應的分類內容填進去。
      document.onkeyup = function(event){
        event = event || window.event;
//        console.log(event.keyCode)//用這個方法獲取到：回車是13，空格是32，上鍵是38，下鍵是40；
        /***********
        if(event.keyCode===32){
            alert('kg');
        }else if(event.keyCode===13){
            //看來必須要是三個等號才會成立。
            alert('hc');
        }
        ********/
        if(event.keyCode===40){
            index++;
            if(index > as.length-1){
                index = 0
            };
            for(var i=0;i<as.length;i++){
                as[i].style.backgroundColor = null;
            };
            as[index].style.backgroundColor = "#ccc";
        };
        if(event.keyCode===38){
            index--;
            if(index<0){
                index = as.length-1;
            }
            for(var i=0;i<as.length;i++){
                as[i].style.backgroundColor = null;
            };
            as[index].style.backgroundColor = "#ccc";
        }
        if(event.keyCode===13){
            for(var i=0;i<as.length;i++){
                as[i].style.backgroundColor = null;
            };
            title.innerHTML = as[index].innerHTML;
                   menu.style.display = "none";
        }
     };
  };  
       //封裝-命名函數
// var overColor = function(){
//         this.style.backgroundColor = "#ccc";
// }
//    function outColor(){
//         this.style.backgroundColor = null;
//     }
//    function replaceInner(){
//         title.innerHTML = this.innerHTML;
//         menu.style.display = "none";
//     }
   // 滑過滑過、離開、點擊每個選項時
   for(var i=0;i<as.length;i++){
//     as[i].onmouseover = overColor;
//     as[i].onmouseout = outColor;
//     as[i].onclick = replaceInner;
//寫法2——直接調用
    as[i].onmouseover = function(){
           this.style.backgroundColor = "#ccc";
           };
       as[i].onmouseout = function(){
           this.style.backgroundColor = null;
           };
       as[i].onclick = function(){
           title.innerHTML = this.innerHTML;
           menu.style.display = "none";
           };
    };//當實在找不到錯誤的時候，看看是不是不小心刪掉了花括號啥的
   // 點擊頁面空白處時
   document.addEventListener('click',function(){
       //注意區分：attachEvent（ie中添加事件監聽器的方法）和addEventListener（通用瀏覽器中添加事件監聽器）。別搞混了寫成attachEventListener了！！
       menu.style.display = "none";
   },false);

}
   </script>

<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>

<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>

任務
一、 點擊菜單中的向下三角展開菜單
提示:
1、點擊三角時需阻止事件冒泡
二、 展開菜單之后，在document對象上綁定keyup事件,(鍵盤事件不是某個具體的對象了，所以要幫到document上面來)按下向下方向鍵，選中下一個選項，按下向上方向鍵，選中上一個選項，按下回車鍵菜單收起，顯示選中項
提示:
1、 聲明一個全局的index變量初值為-1
2、 按下向下方向鍵時index遞增，當遞增至大於等於菜單選項的總數時恢復為0
3、 按下向上方向鍵時判斷index，如若小於等於0則設為菜單選項的總數，之后遞減index
4、 根據index值將對應的選項設為當前（灰色背景）
5、 按下回車鍵時將對應選中的選項設為菜單標題，且將所有選項設為無背景，index恢復為-1，菜單收起
注意：沒有任何選項被選中時，按下回車鍵不做任何操作
三、鼠標滑過每個選項時高亮顯示，離開時去掉背景，點擊高亮選項時菜單標題改變
提示:
1.遍歷所有a標簽，綁定鼠標點擊的事件
注意：要考慮到瀏覽器兼容，使用innerHTML，不要使用innerText
四、點擊頁面空白處收起菜單
提示:
1.綁定在document對象上

慕課練習題：http://www.imooc.com/code/3631