js-event of the mouse, keyboard can control the effect of the dropdown box

<script type= "Text/javascript" >window.onload=function(e) {varBox=document.getelementbyid (' Divselect '), title=box.getelementsbytagname (' cite ') [0], Menu=box.getelementsbytagname (' ul ') [0], as=box.getelementsbytagname (' a '),//as is a collectionIndex=-1; //When you click on the triangletitle.onclick=function(Event) {event= Event | |window.event; if(event.stoppropagation) {event.stoppropagation (); }Else{event.cancelbubble=true; };//These are the judging statements that block bubbles.Menu.style.display = "Block"; //adding keyboard events      //The problem is that after you press ENTER, how to fill in the corresponding classification content. Document.onkeyup =function(Event) {event= Event | |window.event;//Console.log (Event.keycode)//Use this method to obtain: The carriage return is 13, the space is 32, the key is 38, the next key is A;        /*********** if (event.keycode===32) {alert (' kg ');            }else if (event.keycode===13) {//must appear to be three equals to be established.        Alert (' HC '); }        ********/        if(event.keycode===40) {Index++; if(Index > As.length-1) {Index= 0            };  for(vari=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(vari=0;i<as.length;i++) {As[i].style.backgroundcolor=NULL;            }; As[index].style.backgroundcolor= "#ccc"; }        if(event.keycode===13){             for(vari=0;i<as.length;i++) {As[i].style.backgroundcolor=NULL;            }; Title.innerhtml=as[index].innerhtml; Menu.style.display= "None";  }     };         }; //encapsulation-named functions//var overcolor = function () {//This.style.backgroundColor = "#ccc";// }//function Outcolor () {//this.style.backgroundColor = null;//     }//function Replaceinner () {//title.innerhtml = this.innerhtml;//Menu.style.display = "None";//     }   //slide over, leave, click on each option    for(vari=0;i<as.length;i++){//as[i].onmouseover = Overcolor;//as[i].onmouseout = Outcolor;//As[i].onclick = Replaceinner;//notation 2--Direct callAs[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";    }; };//when you can't find an error, see if you accidentally delete the curly braces .   //When you click on the blank pageDocument.addeventlistener (' click ',function(){       //Note the distinction: attachevent (the method of adding event listeners in IE) and AddEventListener (adding event listeners to the Universal browser). Don't mix it up and write it Attacheventlistener!! Menu.style.display = "None"; },false);} </script>

<DivID= "Divselect">      <cite>Please select Category</cite>      <ul>         <LiID= "Li"><ahref= "javascript:;"Selectid= "1">ASP Development</a></Li>         <Li><ahref= "javascript:;"Selectid= "2">. NET development</a></Li>         <Li><ahref= "javascript:;"Selectid= "3">PHP Development</a></Li>         <Li><ahref= "javascript:;"Selectid= "4">JavaScript development</a></Li>         <Li><ahref= "javascript:;"Selectid= "5">Java effects</a></Li>      </ul>    </Div>

HTML

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

Task
One, click the triangle in the menu to expand the menu
Tips:
1. Block event bubbling When you click the triangle
after the menu is expanded, the document object is bound to the KeyUp event, (keyboard event is not a specific object, so to help the document above) press the DOWN ARROW key, select the next option, press the UP ARROW key, select the previous option, press the Enter menu to close, Show Selected Items
Tips:
1. Declare a global index variable with an initial value of-1
2. When the down ARROW key is pressed, index increments and reverts to 0 when the total number of menu options is incremented to greater than or equal to
3, press the UP ARROW key to determine the index, if less than or equal to 0 is set to the total number of menu options, and then decrement index
4. Set the corresponding option to the current (gray background) According to the index value
5, press ENTER when the corresponding selected option is set to the menu title, and all options are set to no background, index reverts to-1, menu collection
Note: When no option is selected, press ENTER to do nothing
three, the mouse over each option highlighting, leaving the background, click the Highlight option when the menu title changes
Tips:
1. Iterate through all a tags and bind the mouse click events
Note: To take into account browser compatibility, use innerHTML, do not use innertext
Four, click on the blank page to close the menu
Tips:
1. Binding on the Document object

Mu class Exercises: http://www.imooc.com/code/3631

js-event of the mouse, keyboard can control the effect of the dropdown box