JavaScript 键盘的按键事件

最新推荐文章于 2024-04-23 09:34:00 发布

yx-02

最新推荐文章于 2024-04-23 09:34:00 发布

阅读量4.4k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/YANG_helloworld/article/details/122547779

版权

一键盘的按键事件

keydown 按键按下
keyup 按键抬起
keypress 按键按下

1, 键盘事件默认只有可以获取焦点的标签支持

    一般只是input标签 
           textarea  
           document 
           document.documentElement 
           document.body

2, div等无法获取焦点的标签可以通过事件的触发绑发键盘事件

3, 键盘按下事件如果一直按住键盘按钮会一直触发事件.

4, keydown 和 keypress 的区别:
所有的按键都会触发keydown事件
有些特殊按键不会触发keypress事件
例如: esc ctrl alt shift 等都不会触发 keypress事件.

二键盘事件的事件对象

什么是事件对象?
事件对象是事件处理函数中的参数 , 其中存储的是触发事件的标签对象的相关数据信息.
e.target 是触发事件的标签对象.

事件对象中的坐标数据:

      e.offsetX
      e.offsetY
    相对于触发事件标签对象 左上角的坐标

      e.clientX
      e.clientY
     相对于视窗窗口左上角的坐标

      e.pageX
      e.pageY
      相对于HTML页面左上角的坐标

不同的事件类型事件对象中存储的数据信息是不同的 , 键盘事件中没有所谓的鼠标点击事件 .

键盘事件的事件对象 :
e.keyCode
键盘按键编号
每个键盘的按键都有一个独立的按键编号
用于区分你触发的按键是哪个

低版本的火狐浏览器使用
e.which 存储按键编号

现在所有的浏览器都是用
e.keyCode 和 e.which 同时存储按键编号

     e.altKey 
     e.ctrlKey
     e.shiftKey
         都是 判断有没有按下按键
         如果按下 , 则返回值是true
         如果没有按下, 返回值是false

   实际项目中 通过判断按下的按键 触发执行不同的程序代码.

在父级标签的范围内通过键盘按键控制标签的定位位置

     1,  给 整个 document 绑定 键盘事件,  触发事件时 控制设定的标签 .

            确定 上 下 左 右 按键的 按键编号
                左  37 
                上  38
                右  39
                下  40

    2,  根据 触发标签的不同 执行不同的程序代码

            左
                获取原始left数据
                每次 累减 数值
                设定极值 最小值是 0
                新的数值赋值给left属性

            上
                获取原始top数据
                每次 累减 数值
                设定极值 最小值是 0
                新的数值赋值给top属性

            右
                获取原始left数据
                每次 累加 数值
                设定极值 最大值是 父级占位-子级占位
                新的数值赋值给left属性

            下
                获取原始top数据
                每次 累加 数值
                设定极值 最大值是 父级占位-子级占位
                新的数值赋值给top属性

...
<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: cadetblue;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

        }
        p{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');
        document.addEventListener('keydown',function(e){
            if(e.keyCode === 37){
                let oPleft = parseInt(window.getComputedStyle(oP).left);
                oPleft--;
                oPleft = oPleft<0 ? 0 : oPleft;
                oP.style.left = oPleft + 'px';
            }else if(e.keyCode === 39){
                let oPright = parseInt(window.getComputedStyle(oP).left);
                oPright += 5;
                 oPright = oPright > oDiv.clientWidth - oP.offsetWidth ? oDiv.clientWidth - oP.offsetWidth  : oPright;
                oP.style.left = oPright + 'px';
            }else if(e.keyCode === 38){
                let oPtop = parseInt(window.getComputedStyle(oP).top);
                oPtop -= 5;
                oPtop = oPtop<0 ? 0 : oPtop; 
                oP.style.top = oPtop + 'px';
            }else if(e.keyCode === 40){
                let oPbottom = parseInt(window.getComputedStyle(oP).top);
                oPbottom += 5;
                 oPbottom = oPbottom > oDiv.clientHeight - oP.offsetHeight ? oDiv.clientHeight - oP.offsetHeight  : oPbottom;
                oP.style.top = oPbottom + 'px';
            }


        })
    </script>