美文网首页
keydown keypress keyup & key

keydown keypress keyup & key

作者: McDu | 来源:发表于2018-12-25 16:00 被阅读9次

一. 键盘事件

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

二. keyCode vs charCode
keypress 时的 keyCodecharCodekeydownkeyup 时的 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 给出的解释:

这些事件的目的完全不同。使用 keyupkeydown 识别物理键,使用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 中的区别,建议只使用 keydownkeyup 事件.

参考文章:
详解键盘事件(keydown,keypress,keyup)

相关文章

网友评论

      本文标题:keydown keypress keyup & key

      本文链接:https://www.haomeiwen.com/subject/xweflqtx.html