Web API 事件(高级) —— 常用键盘事件

 
 
学习来源： https://www.bilibili.com/video/BV1HJ41147DG
 

7、常用键盘事件

键盘事件

注释
1、如果使用 addEventListener 不需要加 on
2、onkeypress 和前面2个的区别是：它不识别功能键，比如左右箭头，shift 等
3、三个事件的执行顺序是：onkeydown — onkeypress — onkeyup

    <script>
        // keyup 按键弹起的时候触发 
        document.onkeyup = function () {
   
            console.log('我弹起了');
        }
        document.addEventListener('keyup', function () {
   
            console.log('我弹起了');
        })

        // keypress 按键按下的时候触发,不能识别功能键，例如：ctrl、shift、左右箭头
        document.addEventListener('keypress', function () {
   
            console.log('我按下了press');
        })

        // keydown 按键按下的时候触发
        document.addEventListener('keydown', function () {
   
            console.log('我按下了down');
        })
        // 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

键盘事件对象

注释
1、onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
2、在实际开发中，更多的使用 keydown 和 keyup，它能识别所有的键 (包括功能键)
3、 keypress 不识别功能键，但是 keyCode 属性能区分大小写，返回不同的ASCII值

    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // keyup 和 keydown 事件不区分字母大小写，a 和 A 得到的都是 65
        // keypress 事件 区分字母大小写，a 得到的是 97 、A 得到的是 65
        document.addEventListener('keydown', function (e