event.which event.charCode event.keyCode event.key

键盘事件包括keydown、kepress和keyup三种，每次敲击键盘都会(依次？)触发这三种事件，其中keydown和keyup是比较低级的接近于硬件的事件，通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键；而keypress是相对于字符层面的较为高级点的事件，这个事件能够捕捉到你键入了哪个字符。可以这样理解，如果你敲击了A键，keydown和keyup事件只是知道你敲击了A键，它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a，它是以"键"为单位，你敲入了大写的A，它只是当成你敲下了shift和A两个键而已，但是keypress可以捕捉到你是敲入的大写的A还是小写的a.   

功能键不会触发keypress事件，因为keypress对应的就是可打印的字符


window.onkeydown = function (event) {
    console.log("onkeydown event.which: " + event.which);
    console.log("onkeydown event.charCode: " + event.charCode);
    console.log("onkeydown event.keyCode: " + event.keyCode);
    console.log("onkeydown event.key: " + event.key);
};

window.onkeyup = function (event) {
    console.log("onkeyup event.which: " + event.which);
    console.log("onkeyup event.charCode: " + event.charCode);
    console.log("onkeyup event.keyCode: " + event.keyCode);
    console.log("onkeyup event.key: " + event.key);
};

window.onkeypress = function (event) {
    console.log("onkeypress event.which: " + event.which);
    console.log("onkeypress event.charCode: " + event.charCode);
    console.log("onkeypress event.keyCode: " + event.keyCode);
    console.log("onkeypress event.key: " + event.key);
}

 

在Chrome下打印如下： 

键盘按下字符a

17:54:27.364 js_hello.html:39 onkeydown event.which: 65              //大写字母A    ASCII码值
17:54:24.794 js_hello.html:40 onkeydown event.charCode: 0
17:54:24.794 js_hello.html:41 onkeydown event.keyCode: 65
17:54:24.794 js_hello.html:42 onkeydown event.key: a
17:54:24.794 js_hello.html:53 onkeypress event.which: 97                //小写字母a    ASCII码值
17:54:24.794 js_hello.html:54 onkeypress event.charCode: 97
17:54:24.794 js_hello.html:55 onkeypress event.keyCode: 97
17:54:24.794 js_hello.html:56 onkeypress event.key: a
17:54:24.939 js_hello.html:46 onkeyup event.which: 65
17:54:24.939 js_hello.html:47 onkeyup event.charCode: 0
17:54:24.939 js_hello.html:48 onkeyup event.keyCode: 65
17:54:24.939 js_hello.html:49 onkeyup event.key: a

 

键盘按下功能键alt
17:54:27.364 js_hello.html:39 onkeydown event.which: 18
17:54:27.364 js_hello.html:40 onkeydown event.charCode: 0
17:54:27.364 js_hello.html:41 onkeydown event.keyCode: 18
17:54:27.364 js_hello.html:42 onkeydown event.key: Alt
17:54:27.523 js_hello.html:46 onkeyup event.which: 18
17:54:27.524 js_hello.html:47 onkeyup event.charCode: 0
17:54:27.524 js_hello.html:48 onkeyup event.keyCode: 18
17:54:27.524 js_hello.html:49 onkeyup event.key: Alt