在製作 PC 端的遊戲的時候，我們經常需要監聽鍵盤的事件，以便響應用戶的鍵盤操作。目前，對鍵盤事件的支持主要遵循的是 DOM0級。
按鍵相關事件
鍵盤操作涉及下面三種事件：
keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住按住不放的話，會重複觸發此事件。
keypress：當用戶按下鍵盤上的字符鍵時觸發，而且如果按住不放的，會重複觸發此事件（按下Esc鍵也會觸發這個事件）。
keyup：當用戶釋放鍵盤上的鍵時觸發。
按鍵過程
用戶按下鍵盤上的字符鍵時
首先會觸發 keydown 事件
然後緊接着觸發 keypress 事件
最後觸發 keyup事件
如果用戶按下了一個字符鍵不放，就會重複觸發 keydown 和 keypress 事件，直到用戶鬆開該鍵爲止。
鍵碼（keyCode）對照表
在發送 keydown 和 keyup 事件時，event 對象的 keyCode 屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。如下圖，爲我們鍵盤鍵位的 keyCode 對照表：
例子：簡單實現鍵盤控制物體移動
實現的基本原理如下：監聽全局鍵盤操作事件，當用戶按下某一按鍵時，返回對應的鍵值，然後再根據鍵值判斷用戶按下了哪一按鍵，來控制物體上下移動的操作，效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物體移動</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var rect = {
x: 100, // 矩形的 x 座標
y: 400, // 矩形的 y 座標
width: 100, // 矩形的寬度
height: 100, // 矩形的高度
step: 30 // 矩形移動的步伐
}
// 全局監聽鍵盤操作的 keydown 事件
document.onkeydown = function(e) {
// 獲取被按下的鍵值 (兼容寫法)
var key = e.keyCode || e.which || e.charCode;
switch(key) {
// 點擊左方向鍵
case 37:
rect.x -= 20;
drawRect();
break;
// 點擊上方向鍵
case 38:
rect.y -= 20;
drawRect();
break;
// 點擊右方向鍵
case 39:
rect.x += 20;
drawRect();
break;
// 點擊下方向鍵
case 40:
rect.y += 20;
drawRect();
break;
}
};
function drawRect() {
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);
// 繪製矩形
context.fillRect(rect.x, rect.y, rect.width, rect.height);
}
// 第一次繪製
drawRect();
</script>
</body>
</html>