JavaScript按键检测

< Sunday >

已于 2024-08-29 03:17:36 修改

阅读量245

点赞数 1

分类专栏：前端文章标签： javascript

于 2024-08-02 10:14:06 首次发布

本文链接：https://blog.csdn.net/qq_62563725/article/details/140864566

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

核心代码

document.onkeydown = function(event){}
//参数固定为event，event表示你按键的信息

代码说明

document.onkeydown事件为：检测按键按下。

即只要任意按键按下，document.onkeydown事件都会触发。

注：当一个按键长按时，document.onkeydown事件会被不断触发。

因为长按时，键盘在不断向电脑传输字符，相当于按键被不断按下。

例如：

document.onkeydown = function(event){
    alert("你按下了一个按键。")
}

在上述代码当中，当任意按键被按下，都会跳出“你按下了一个按键”的弹窗。

相似的按键事件有：

keydown：按下按键

keyup：释放按键

keypress：摁下摁键，并且产生一个字符时发生

以下我主要以keydown事件展开讲解，其他事件用法是相似的。

参数event为固定参数，里面存储着你按下的按键信息。

例如：

    document.onkeydown = function(event){
        console.log(event)
    }

在上述代码中，当你按下某个按键时，就会打印相应按键的信息

如，我按下按键“a”，将会打印以下信息：

以上信息可以通过点（.）来进行调用。

例如：

    document.onkeydown = function(event){
        console.log(event.key)
    }

运行以上代码后，当我按下按键“a”，控制台就会打印按键“a”对应的key值。

在event众多信息中，我们主要关心其中的两个信息：key和keyCode

key：按下的按键对应的字符。同一个字母的大小写字符是不一样的。

keyCode：按下的按键对应的编码。同一个字母的大小写编码是一样的。

案例

以下是我同通过按键检测制作的一个小案例，通过wasd来控制小球移动。

<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
<script>
    var body = document.getElementsByTagName("body")[0]

    // 定义一个按键的Set集合，用于记录按键按下去的键
    const keySet = new Set();//Set是一个里面元素不重复的集合
    // set可使用has（）方法，可用来快速判断set里面是否含有某个值

    // 当某个按键被按下，将其按键信息添加到集合keySet中
    document.onkeydown = function(event){
        keySet.add(event.keyCode) 
    }

    // 当某个按键被松开，将其按键信息从集合keySet中删除
    document.onkeyup = function(event){
        keySet.delete(event.keyCode)
    }

    // 初始化小球的坐标
    var x = 0
    var y = 0

    // 定义一个绘制小球的函数
    function draw(x,y){
        //清空页面
        body.innerHTML=``

        //绘制小球
        body.innerHTML=`
            <div style="width: 50px; height: 50px;
            border-radius: 50%; background-color: red; 
            margin-left: ${x}px;margin-top: ${y}px;"></div>
        `
    }

    // 定义一个小球移动的函数
    function move(){
        //左右移动的判断（65---a，68---d）
        if(keySet.has(65)){x -= 40;}//has表示判断集合里面是否有某个元素
        if(keySet.has(68)){x += 40;}
        //上下移动的判断（87---s，83---w）
        if(keySet.has(87)){y -= 40;}
        if(keySet.has(83)){y += 40;}
    }
    
    // 循环绘制小球
    setInterval(function(){
        // 将小球在屏幕上绘制
        draw(x,y)
        // 更新小球移动后的坐标
        move()
    },50)

</script>
</html>