关于键盘事件

Posted 2021-10-13 橘止下落不明

监听全局键盘按下事件

keydown:在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件

document.addEventListener('keydown', function(e) {
 console.log(e.key);
})

监听全局键盘弹起事件

keyup:松开按键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态

document.addEventListener('keyup', function(e) {
   console.log(e.key);
 })

监听全局键盘按下事件

keypress:按下某个键盘键时触发。如果按住某个键，会不断触发该事件。

 document.addEventListener('keypress', function(e) {
     console.log(e.key);
})

注意：

1.KeyDown触发后，不一定触发KeyUp;

2.KeyPress主要用来捕获数字,不包括F1-F12，ctrl , shift , tab , alt , home ......；

3.KeyDown 和KeyUp 通常可以捕获键盘全部;

4.按键敲击的执行顺序为KeyDown,KeyPress,KeyUp;

5.KeyDown 和KeyUp 可以捕获组合键;

属性：

1.keyCode为该属性包含键盘中对应键位的键值，返回的时ascll值

document.addEventListener('keydown', function(e) {
    console.log(e.keyCode);
})

2.shiftKey为检查按键shift,如果是shift则返回true不是则返回false

document.addEventListener('keydown', function(e) {
    console.log(e.shiftKey);
})

2.ctrlKey为检查按键ctrl,如果是ctrl,则返回true不是则返回false

document.addEventListener('keydown', function(e) {
    console.log(e.ctrlKey);
})

 3.altKey为检查按键alt,如果是alt,则返回true不是则返回false

document.addEventListener('keydown', function(e) {
    console.log(e.altKey);
})