【Javascript】键盘事件：keyup、keydown、keypress

html 中，对键盘监听的事件有3个 keyup、keydown、keypress。顾名思义，它们的触发时机是：keyup - 键盘释放，keydown - 键盘按下，keypress - 键盘按下并释放（此处 keypress 是坑，看了就忘了吧）。

键盘事件中我们常用到的一个参数是 e.keyCode，通过它我们可以判断用户按下的是哪个键。
以下提供一段测试代码：

document.addEventListener('keydown',function(e){
console.log('keydown:', e.keyCode);
//        e.preventDefault();
});
document.addEventListener('keyup',function(e){
console.log('keyup:', e.keyCode);
});
document.addEventListener('keypress',function(e){
console.log('keypress:', e.keyCode);
});

你可以按下 1、A、空格、回车、ESC、小键盘的1…… 键依次测试。(ps：tab 键会引起失焦，需另行处理，暂不考虑)
我在chrome浏览器中的测试结果：
—— 触发顺序：keydown[,keypress],keyup，即 keypress 并不是每次都触发了。
—— 小键盘中的键：keypress 中输出的 keyCode 与 keyup、keydown不同。
—— 为测试 tab 键，在 keydown 中添加了注释掉的那句“e.preventDefault();”，结果 keypress 事件不再被触发。

综合网上的一些资源，整理结论如下：
【结论】- 仅针对chrome
1 keypress 的触发时机：当按键会引起打印输出时，在 keydown 后会触发 keypress 事件。（我的理解：打开一个记事本，如果你按了这个键，记事本里的文本会增加，那这个键就会触发 keypress，所以，ESC、Backspace、方向键……都不会触发 keypress）
2 keydown 的浏览器默认操作中包含触发 keypress 事件（除1中描述的情况）。
3 keypress 不区分小键盘，网上更准确的描述是：keydown/keyup 中 e.keyCode 是按键的 code，而 keypress 中是打印内容对应的 ASSIC 码。
4 组合键：每个键分别引起 keydown/keyup，组合键后的若能引起打印输出，则会引起 keypress。

其他浏览器（不完全测试）：
可以用 e.which 替换 e.keyCode；
firefox 中的 keypress 事件不支持 e.keyCode，可用 e.charCode 或 e.which 代替；
chrome 及 IE11 keyup/keydown 不支持 e.charCode，可用 e.keyCode 或 e.which 代替。

=================

基于主贴的例子加了些断点测试了chrome，更多浏览器有兴趣的话欢迎补充。
触发顺序是：keydown -> [keypress] -> [字符显示] -> keyup
字符显示的前提是触发键盘的源是可编辑的元素（比如文本框），如果监听是像例子中加在document或div之类非编辑元素，不一定会有显示的，但依然可以触发键盘事件
keypress先于字符显示触发，比如在keypress事件中对文本框赋值，我发现其实是失效的，仍然显示了键盘按下的值，而在keyup中赋值就会将文本框的值改变了 keypress可能因为keydown的e.preventDefault()被拦截