event之键盘事件

键盘事件

    keydown 当用户按下键盘上的任意键时触发，按住不动将重复触发

   keyup 当用户释放键盘上的键时触发     event.keyCode键码

    keypress  当用户按下键盘上的字符键时触发，按住不动将重复触发     event.charCode（ASC||编码形式展示，需通过String.fromCharCode()方式转换，IE9以下不支持）
 

利用键盘实现块移动

1.定义块#ok

2.获取ok

var dOk = document.getElementById("ok");

3.实现效果

错误示范：

window.onkeydown = function (e) {
    var l = dOk.offsetLeft;
   var t = dOk.offsetTop;
 if (e.keyCode === 37) {
  l -= 5;
} else if (e.keyCode === 38) {
  t -= 5;
 } else if (e.keyCode === 39) {
             l += 5;
         } else if (e.keyCode === 40) {
             t += 5;
         }
         dOk.style.left = l + 'px';
        dOk.style.top = t + 'px';
     }

错误原因：运动不自然，无法实现两个方向一起移动

正确方法：

1.定义上下左右

2.释放和按下键盘上的键时触发事件

3.通过计时器实现移动

var isLeft = false;
    var isTop = false;
    var isRight = false;
    var isBottom =false;
    // 计时器
    var timer = null;
    // 键盘事件：只修改状态
    window.onkeyup = function(e) {
        if (e.keyCode===37){
            isLeft = false;
        }else if (e.keyCode===38){
            isTop= false;
        }else if (e.keyCode===39){
            isRight = false;
        }else if (e.keyCode===40){
            isBottom = false;
        }
    }
    window.onkeydown = function(e) {
        if (e.keyCode===37){
            isLeft = true;
        }else if (e.keyCode===38){
            isTop= true;
        }else if (e.keyCode===39){
            isRight = true;
        }else if (e.keyCode===40){
            isBottom = true;
        }
    }
    // 通过计时器实现移动
    timer = setInterval(function(){
        var l = dOk.offsetLeft;
        var t = dOk.offsetTop;
        if (isLeft){l-=5;}
        if (isTop){t-=5;}
        if (isRight){l+=5;}
        if (isBottom){t+=5;}
        dOk.style.left = l+'px';
        dOk.style.top = t+'px';
    },30)