JavaScript-----键盘事件

🍓.常用键盘事件:

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等

举个栗子:

🐇 onkeyup

    document.onkeyup = function () {
        console.log("键盘被松开了");
    }
    document.addEventListener('keyup', function () {
        console.log("键盘弹起了");
    })

效果如下:

🐇 onkeydown

    document.onkeydown = function () {
        console.log("键盘被按下");
    }
    document.addEventListener('keydown', function () {
        console.log("键盘被按下了");
    })

效果如下:

🐇 onkeypress

    document.onkeypress = function () {
        console.log("键盘被按下press");
    }
    document.addEventListener('keypress', function () {
        console.log("键盘被按下了press");
    })

效果和 onkeydown一样,但是它不识别功能建，比如左右箭头，shift等。

注意:

当这三个事件同时进行时,是有先后顺序之分的

🐇 注意:

1. 1.如果使用addEventListener不需要加on
2. 2. onkeypress和前面2个的区别是，它不识别功能建，比如左右箭头，shift等。
3. 3.三个事件的执行顺序是: keydown -- keypress ---keyup

---

🍓.键盘事件对象中的keyCode属性可以得到相应键的ASCII值

举个栗子:

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

当我们按下1的时候,就会在控制台中出现key值为1

我们也可以从keyCode属性上得知它的数值就是按下键的ASCII值

具体ASCII码值可以查看链接ASCII

注意:

1. 1．我们的keyup和keydown事件不区分字母大小写a和A得到的都是65
2.  2．我们的keypress事件区分字母大小写a 97和A 65