键盘事件包括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