2017-7-21

收获:

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){
                    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;
}