操作键盘事件源码解析（常用的鼠标事件、键盘事件对象之keyCode属性）

最新推荐文章于 2024-01-17 00:52:01 发布

不易撞的网名

最新推荐文章于 2024-01-17 00:52:01 发布

阅读量318

点赞数

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

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119960500

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

本文介绍了JavaScript中常见的键盘事件，包括keyup、keydown和keypress事件，详细解析了这些事件的触发时机。同时，重点讨论了keyCode属性，展示了如何利用keyCode获取按键对应的ASCII码值，并在keyup事件中通过ASCII码判断用户按下的具体键位。

摘要由CSDN通过智能技术生成

操作键盘事件

常用的鼠标事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用的鼠标事件</title>
</head>

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');

        //     }



        document.addEventListener('keyup', function () {
            console.log('我弹起了');
        })

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




        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function () {
            console.log('我按下了down');
        })
            // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
</body>

</html>

键盘事件对象之keyCode属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件对象之keyCode属性</title>
</head>

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

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

        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65

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

            console.log('up:' + e.keyCode);

            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })


        document.addEventListener('keypress', function (e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
    </script>
</body>

</html>