keydown keypress keyup & keyCode vs charCode

一. 键盘事件

键盘事件触发顺序为：keydown -> keypress -> keyup.
当用户按下一个字符键不放，会重复触发 keydown、keypress，直到用户松开该键，触发一次 keyup.
当用户按下一个系统功能键不放，会重复触发 keydown，直到用户松开该键，触发一次 keyup.
在 keyup 中无法阻止浏览器默认事件，在 keypress 时，浏览器默认行为已经完成。
keypress 不支持上下左右键等系统功能键。

二. keyCode vs charCode
keypress 时的 keyCode、charCode 与 keydown、keyup 时的 keyCode charCode 不一致：

<script type="text/javascript">
function keyPress(e) {
    console.log( 'Keypress keyCode', e.keyCode);
    console.log( 'Keypress charCode', e.charCode);
}
function keyDown(e) {
    console.log( 'Keydown keyCode', e.keyCode);
    console.log( 'Keydown charCode', e.charCode);
}
function keyUp(e) {
    console.log( 'Keyup keyCode', e.keyCode);
    console.log( 'Keyup charCode', e.charCode);
}
</script>
<body
 onkeypress="keyPress(event);"
 onkeydown="keyDown(event);"
 onkeyup="keyUp(event)"
></body>

Screen Shot 2018-12-25 at 3.32.06 PM.png

https://stackoverflow.com/questions/11030532/keypress-and-keyup-why-is-the-keycode-different 给出的解释：

这些事件的目的完全不同。使用 keyup 和 keydown 识别物理键，使用keypress 识别键入的字符。这两者是根本不同的任务，有不同的事件，不要试图混合两者。特别是，keypress 事件上的 keyCode 通常是多余的，不应该使用.（旧的IE中除外，Jan Wolter's article on key events）; 对于可打印的按键，它通常与charCode 相同，尽管浏览器之间存在一些差异。

event 对象包含一个 keyCode 属性和一个 charCode 属性.

当是 keydown keyup 事件时，keyCode 表示的就是你具体按的键(也称为virtual keycode)，charCode 为0.
当捕捉的是 keypress 事件时，keyCode 为0，charCode 指的是你按下的字符（而 IE 只有一个 KeyCode 属性，它指的是你键入的字符(character code))
鉴于 IE 和 FF 中的区别，建议只使用 keydown 和 keyup 事件.

参考文章：
详解键盘事件(keydown，keypress，keyup)

keydown keypress keyup & keyCode vs charCode

推荐阅读更多精彩内容