js键盘按键监听

某一天我在做一个H5的游戏时，发现当我同时长时间按住键盘上的两个按键时，永远只有后按的那个按键的事件会被一直触发执行（先按下的那个按键的事件会被执行，直到有新的按键被按下）。

js里的键盘事件keydown和keyup，keydown表示键盘上的按键被按下的时候触发，如果你一直按着，那么久会被一直出发，相应的keyup则是松开按键时触发。相比于keydown，keyup只会被触发一次，这个很好理解。下面是代码截图和效果截图：

document.addEventListener("keyup",function(e){

console.log(e.keyCode+" is up");

});

document.addEventListener("keydown",function(e){

console.log(e.keyCode+" is down");

});

目前这种状况肯定是不行的，做个游戏，只能后按的人能操控了，显然这是一个巨大的BUG。

方案a：

        既然长按不能同时两个人控制，那我们就换个方式，让用户每按一次都只能触发一次按键事件。这样至少保证了游戏的公平性，这游戏还能玩。这样很简单，直接把监听的事件换了就行，把“keydown”换成“keyup”就ok了。

可是按照广大游戏玩家的“游戏习惯”来说，如果我要移动角色，我不用一次次的去按方向键，除非我要改变当前的移动方向，否则我只要一直按着就可以了。目前这种解决方案肯定是不行的。难道就真的不可以实现同时按住多个按键，让每个按键的事件都不断的被触发么？

方案b:

我们再来回顾一下刚才的keydown事件。代码是这样的：

        document.addEventListener('keydown',function(e){

                console.log(e.keyCode+" is down");

                //your code

        });

注意，我们触发我们想要执行的事件是通过判断当前的keycode来判断按下的是那个按键，再来判断我们需要执行哪一个事件。追根溯源，我们是通过按键按下这一动作来触发的我们自己的事件的，可是这样子不能达到我们想要的结果。那我们不妨换个方式来触发我们的事件。

先看看keydown事件的特点：同时按下多个按键，每个按键都至少被触发一次。那我们不妨尝试用按键的状态来触发我们的事件。先来看看改进后的代码和效果：

varkey_pressed={};

document.addEventListener("keyup",function(e){

key_pressed[e.keyCode]=false;

});

document.addEventListener("keydown",function(e){

key_pressed[e.keyCode]=true;

});

setInterval(function(){

for(varkeyinkey_pressed){

if(key_pressed[key]){

console.log(key+" is down");

}

}

},50);

现在我们keydown的时候不在直接触发我们的事件，而是记录当前被按下的按键的状态（当然，你只需要记录你关注的按键的状态），按下标记为true，松开标记为false。然后，我们再用一个函数去检测你关心的那些按键的状态，为true的就触发相应的事件。然后再用setInterval函数每隔一段时间去执行这个检测函数。这样就能实现同时按住多个按键，同时触发多个事件了。setInterval设置的时间间隔越小，模拟出来的实现越精确，建议可以看看keydown的执行频率，与它保持一致最好。

小尾巴：这是我的博客处女做，不喜勿喷，欢迎大家指正交流  ^_^