js键盘事件再也不用搜keycode键码对照表了，直接用key属性获取按键string

以前使用键盘事件，总要搜一下keycode键码对照表，最近前端换了个IDE，从sublime换成WebStorm，无意间发现keyCode方法已经弃用了，虽然现在还是可以使用的，但以后就说不准了

不用keyCode，但是发现有一个key方法

key方法的输出类型为string字符串

onkeydown = function (event) {
    alert(typeof event.key)	//输出string
}

按了几个键试了下输出

onkeydown = function (event) {
    alert(event.key)
}

按键	输出
字母a键	a
数字5键	5
f4键	F4
回车键	Enter
空格键	一个空格
shift键	Shift
按住shift键后按数字5键	先Shift后$
大写锁定键	CapsLock
大写锁定键开启后按字母a键	A
上方向键	ArrowUp
下方向键	ArrowDown
左方向键	ArrowLeft
右方向键	ArrowRight
windows键	Meta

用event的key属性写一个简单的键盘事件：方向键控制小方块移动
为了省事，css就直接写在行内了

<div id="box" style="position: absolute;top: 100px;left: 100px;width: 20px;height: 20px;background: dodgerblue"></div>

window.onload = function(){
    //通过id获取小方块
    var box = document.getElementById('box')
    //方向键控制小方块移动
    onkeydown = function (event) {
        if(event.key == 'ArrowUp')
            box.style.top = (parseInt(box.style.top.slice(0,-2))-5).toString() + 'px'
        else if(event.key == 'ArrowDown')
            box.style.top = (parseInt(box.style.top.slice(0,-2))+5).toString() + 'px'
        else if(event.key == 'ArrowLeft')
            box.style.left = (parseInt(box.style.left.slice(0,-2))-5).toString() + 'px'
        else if(event.key == 'ArrowRight')
            box.style.left = (parseInt(box.style.left.slice(0,-2))+5).toString() + 'px'
    }
}

用起来完全没问题，也很方便

最后，顺便说一下三种键盘事件的区别

1. 按下任意键触发：onkeydown
2. 按下任意字符键触发（除了shift、ctrl、f4等）：onkeypress
3. 释放按键触发：onkeyup

需要注意的是，对于onkeydown和onkeypress，键按住不放会重复触发事件

所以，对应三种键盘事件中event对象的key属性：
其中onkeydown和onkeyup事件的key属性可以返回任意按键的字符串，而onkeypress只能返回字符按键（除了shift、ctrl、f4等）的字符串