键盘事件onkeydown和onkeyup

键盘事件：

onkeydown       按键被按下                  若一直按着某个按键不松，则事件一直被触发，在连续触发时第一次和第二次之间时间会稍长一些。这样设计师为了防止误操作。

onkeyup           按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或是document

例如div是无法获取焦点的，prompt（）输入框是可以获取焦点的。

例：

<script>
  window.onload = function(){
       //给文档绑定键盘事件：onkeydown  键盘被按下
     document.onkeydown = function(event){
         //返回按键的Code编码
      console.log(event.keyCode);                                  
 };
          };

</script>

我们可以通过keyCode来获取被按下键盘的unicode编码，从而来判断按下的是哪个按钮。

键盘事件除了提供keyCode来判断之外，还提供了以下几个属性。

altkey    ctrlkey  shiftkey    通过这三个按钮来判断alt、ctrl、shift是否被按下，是则返回ture 否则返回false.

window.onload = function(){
       document.onkeydown = function(event){
             event= event||window.event
   //判断w和alt是否被同时按下，是则弹出hello.
       if(event.keyCode == 87 && event.altkey){
          alert("hello");
          };
     }; 
};

在文本框中输入内容，是onkeydown的默认行为。

数字的keycode是48~57.只输入数字可以做条件表达式。keyCode >=48&&keyCode<=57

键盘上的上、下、左、右四个Code编码是38、40、37、39.

W:87   A:65  S:83  D:68  

做个练习：

通过键盘控制div的上下左右移动。

 <style>
    #box1{ width: 100px;
            height: 100px;
            background: yellowgreen;
            position: absolute;

    }
    body{background-color:gray;
    }
    
    </style>
    <script>
   window.onload= function(){
      
      var box1  = document.getElementById("box1");
      var speed =10;
      document.onkeydown = function(event){

         event= event||window.event;

         switch(event.keyCode){
             case 38:
             //console.log("向上");
             box1.style.top = box1.offsetTop - speed +"px";
             break;
             case 40:
             //console.log("向下");
             box1.style.top = box1.offsetTop + speed + "px";
             break;
             case 37:
             //console.log("向左");             
             box1.style.left = box1.offsetLeft - speed + "px";
             break;
             case 39:
             //console.log("向右");
             box1.style.left = box1.offsetLeft +speed +"px";
             break;
         };

      };
   };
     
          
    
    </script>