按键事件笔记

Posted 2020-08-15 炎泽

按键会触发按键事件（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。