一. 键盘事件
- 键盘事件触发顺序为：
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 属性.
- 当是
keydownkeyup事件时，keyCode表示的就是你具体按的键(也称为virtual keycode)，charCode为0. - 当捕捉的是
keypress事件时，keyCode为0，charCode指的是你按下的字符（而 IE 只有一个KeyCode属性，它指的是你键入的字符(character code))
鉴于 IE 和 FF 中的区别，建议只使用keydown和keyup事件.
网友评论