摘要：級事件為鍵盤事件制訂了規范鍵盤事件按下任意鍵觸發，如果按住不放，會重復觸發按下字符鍵觸發，如果按住不放，會重復觸發按下鍵也會觸發釋放鍵盤上的鍵時觸發文本事件在文本插入文本框之前會觸發事件。

“DOM3級事件”為鍵盤事件制訂了規范：

鍵盤事件：

keydown：按下任意鍵觸發，如果按住不放，會重復觸發；

keypress：按下字符鍵觸發，如果按住不放，會重復觸發；按下Esc鍵也會觸發；

keyup：釋放鍵盤上的鍵時觸發；

文本事件：

textInput：在文本插入文本框之前會觸發textInput事件。

程序：

當用戶按下一個鍵盤上的字符鍵：keydown --> keypress --> keyup；
當用戶按下一個鍵盤上的非字符鍵：keydown --> keyup；

發聲keydown和keyup事件，event對象的keyCode屬性包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCⅡ碼中對應小寫字母或數字的編碼相同。

鍵碼如下：

字母和數字鍵的鍵碼值(keyCode)
A    65    J    74    S    83    1    49
B    66    K    75    T    84    2    50
C    67    L    76    U    85    3    51
D    68    M    77    V    86    4    52
E    69    N    78    W    87    5    53
F    70    O    79    X    88    6    54
G    71    P    80    Y    89    7    55
H    72    Q    81    Z    90    8    56
I    73    R    82    0    48    9    57

數字鍵盤上的鍵的鍵
碼值(keyCode)             功能鍵鍵碼值(keyCode)
0    96    8        104     F1    112    F7    118
1    97    9        105     F2    113    F8    119
2    98    *        106     F3    114    F9    120
3    99    +        107     F4    115    F10    121
4    100    Enter     108        F5    116    F11    122
5    101    -        109     F6    117    F12    123
6    102    .        110                    
7    103    /        111                    

控制鍵鍵碼值(keyCode)
BackSpace    8    Esc            27    Right Arrow    39    -_    189
Tab            9    Spacebar    32    Dw Arrow    40    .>    190
Clear        12    Page Up        33    Insert        45    /?    191
Enter        13    Page Down    34    Delete        46    `~    192
Shift        16    End            35    Num Lock    144    [{    219
Control        17    Home        36    ;:            186    |    220
Alt            18    Left Arrow    37    =+            187    ]}    221
Cape Lock    20    Up Arrow    38    ,<            188    ""    222

多媒體鍵碼值(keyCode)
音量加    175
音量減    174
停止        179
靜音        173
瀏覽器    172
郵件        180
搜索        170
收藏        171

但部分鍵碼在不同瀏覽器有不同的值；

這個屬性只有在發聲keypress事件才包含值，而且這個值是按下的那個鍵所代表字符的ASCⅡ編碼；此時的keyCode通常等于0或者也可能等于所按鍵的鍵碼。

window.onkeydown = function() {
    console.log(event.charCode); //a的值為0
}
window.onkeypress = function() {
    console.log(event.charCode); //a的值為97
}
window.onkeydown = function() {
    console.log(event.keyCode); //a的值為65
}
window.onkeypress = function() {
    console.log(event.keyCode); //a的值為97
}

上面的例子顯示，當onkeydown時，charCode為0，keyCode為65；當onkeypress時，charCode與keyCode值相同為97

IE8及之前的版本和Opera是在keyCode中保存字符的ASCⅡ編碼，通用版如下：

function getCharCode () {
    if (typeof event.charCode == "number") {
        return event.charCode;
    } else {
        return event.keyCode;
    }
}

獲得了ASCⅡ編碼后，可以通過String.fromCharCode()將其轉換成實際的字符。

var inputName = document.getElementById("name");
var list = [];
inputName.onkeypress = function() {
    var charCode = event.charCode;
    var keys = String.fromCharCode(charCode);
    list.push(keys);
    charCode = null;
    keys = null;
}
inputName.onkeydown = function() {
    var keyCode = event.keyCode;
    switch (keyCode) {
        case 8:
            list.push("backspace");
            break;
        case 37:
            list.push("left")
            break;
        case 39:
            list.push("right")
            break;
        case 13:
            console.log(list.join(""));
            inputName.value = null;
            list.splice(0, list.length);
            break;
    }
}
//輸入oliver，輸出oliver

DOM3級事件中的鍵盤事件，不再包含charCode屬性，而是包含兩個新屬性：key和char；

key屬性：返回相應的文本字符（字符鍵返回字符，非字符鍵返回“shift”等）；

char屬性：返回相應的文本字符（字符鍵返回字符，非字符鍵返回null）；

兼容性：

IE9支持key屬性但不支持char屬性；

Safari 5和Chrome支持名為keyIdentifier的屬性，非字符鍵返回“shift”等，字符鍵返回格式類似“U+0000”的字符串，表示Unicode值。

如下：

window.onkeydown = function () {
    console.log(event.key || event.keyIdentifier);
}

location屬性表示按下了什么位置上的鍵：

0表示默認鍵盤；

1表示左側位置（左邊的Alt鍵等）；

2表示右側位置；

3表示數字小鍵盤；

4表示移動設備鍵盤（虛擬鍵盤）；

5表示手柄（Wii控制器等）；

IE9支持這個屬性；Safari和Chrome支持名為keyLocation屬性（目前貌似支持location屬性了）;

接收一個參數（修改鍵），當指定的修改鍵是活動的，這個方法返回true，否則返回false；參數有（“Shift”、“Alt”、“Control”、“Meta”）；

然而事實上用event.shiftKey等屬性即可。

當用戶在可編輯區域中輸入字符時，就會觸發。與keypress不同，首先只要能獲得焦點的元素都可以觸發keypress，但只有可編輯區域才能出發textInput。另一個區別是textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發，keypress則在按下能夠影響文本顯示的鍵時也會觸發（例如退格鍵）。

另外event中data屬性返回用戶輸入的字符：

var textbox = document.getElementById("name");
textbox.addEventListener("textInput", function () {
    console.log(event.data);
})

注意，只能用addEventListener函數。

dvent對象上的屬性，表示把文本輸入到文本框中的方式：

0：不確定如何輸入的；

1：鍵盤；

2：粘貼；

3：拖放；

4：IME；

5：表單中選擇某一項輸入；

6：手寫；

7：語音；

8：組合輸入；

9：腳本輸入；