收获:

1. 键盘事件

• onkeyUp 放开之前按下的键盘发生
• onkeyPress 按下字符键才有作用，其他键没有作用
• onkeyDown 按下键盘任何键都会发生
• event对象的 keyCode 属性 获取键盘码

示例：
function(event){
console.log(event.keyCode);
}

• 判断用户是否按下了特定的键，可以下获取这个键的键盘码，然后再进行 if 判断

if(event.keyCode == 40){

    ...
  }

感受：

今天做了一个小项目，键盘上下左右可以选择select里面的选项，并且按下回车的时候可以把内容换成 otion里面的内容，做出来很有成就感，也是感觉学到了很多，好多方法以前根本就想不到，现在可以用起来了。Good

打算：

• 按照慕课网的教程把Github的课程看一遍

项目源代码:

   var otitle = document.getElementById("divselect"),
     oul = otitle.getElementsByTagName("ul")[0],
     olis = oul.getElementsByTagName("li"),
         ovalue = otitle.getElementsByTagName("cite")[0],
         index = -1;
window.onload = function(){
    //点击div时
    otitle.onclick = function(){
        stop();
        oul.style.display = 'block';
    }
     
    //滑过、点击li时
    for(var i = 0;i<olis.length;i++){
        //滑过
        olis[i].onmouseover = function(){
            this.style.background = '#ccc';
        }
        olis[i].onmouseout = function(){
            this.style.background = '#fff';
        }
        
        //点击li
        olis[i].onclick = function(){
            stop();
            oul.style.display = 'none';
            ovalue.innerText = this.innerText;
        }
    }
        //点击文档
        document.onclick = function(){
            oul.style.display = 'none';
        }
        
        //键盘事件
        document.onkeyup = function(event){
            for(var i = 0;i<olis.length;i++){
                olis[i].style.background = '#fff';
            }
            
            //向下
            if(event.keyCode == 40){
                index++
                if(index >= olis.length){
                    index = 0;
                }
                olis[index].style.background = '#ccc';
            }
            
            //向上
            if(event.keyCode == 38){
                if(index <= 0){
                    index = olis.length;
                }
                index--
                olis[index].style.background = '#ccc';
            }
            
            //点击
            if(event.keyCode == 13){
                oul.style.display = 'none';
                ovalue.innerText = olis[index].innerText;
                index=-1;
            }
        }
}

//阻止事件冒泡
function stop(event){
    event = event || window.event;
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
}