按键事件笔记

按键会触发按键事件(KeyboardEvent{}),触发顺序为keydown,keypress,keyup

组合键是,即使输入一个字符,也会触发多次keydown,keyup事件

eg:<div class="aa" contenteditable="true" onkeydown="a(event)"></div>

function a(event){
    var ev= event || window.event;
    console.log(ev)
}

输出:

  1. altKey: false
  2. bubbles: true
  3. cancelBubble: false
  4. cancelable: true
  5. charCode: 0
  6. ctrlKey: false
  7. currentTarget: null
  8. defaultPrevented: false
  9. detail: 0
  10. eventPhase: 0
  11. keyCode: 49
  12. keyIdentifier: "U+0031"
  13. keyLocation: 0
  14. location: 0
  15. metaKey: false
  16. path: Array[5]
  17. repeat: false
  18. returnValue: true
  19. shiftKey: false
  20. srcElement: div.aa
  21. target: div.aa
  22. timeStamp: 1477194433716
  23. type: "keydown"
  24. view: Window
  25. which: 49

就重要的做一下注解:

keyCode 键码值,每个按键对应一个键码值

具体表单可查看:http://blog.csdn.net/woshishui6501/article/details/8282579

兼容性: 均支持

charCode 字符码,由输入的内容而定(比如输入a,charCode是97,输入A,则是65)

兼容性:均支持, 低版本IE不支持,为undefined

which 键码值

兼容性:均支持, 低版本IE不支持,为undefined

网上的答案均比较陈旧,先自测结果如下:

测试笔记:

1.目前测试结果是keyCode= which,一般用keyCode

2.触发顺序为keydown,keypress,keyup,没有输入数值时(比如单按下shift或者ctrl键),keypress不被触发[这只是一般情况,chrome,ie不能,ff却可以]

3.keydown和keyup可以捕获组合键,keypress只能捕获单个字符

4.均可以捕获大小写,网上说只有keypress可以,亲测,均可,可能是版本原因

5.keydown和keyup可以捕获任何按键,网上说prt scren不能捕获,亲测,可以

6.keydown和keyup区分主键盘和小键盘的数字,(通过keyIdentifier,keyLocation,location),keypress不能

7.捕获组合键请用keydown。

原文地址:https://www.cnblogs.com/yanze/p/5989837.html