键盘事件-keydown和keyup-按键按下与释放事件-前端-Javascript-书闪BookChips

121 - 键盘事件 - keydown 和 keyup - 按键按下与释放事件

作者：

贺及楼

成为作者

更新日期：2025-02-21 19:57:13

键盘事件 - keydown 和 keyup - 按键按下与释放事件

在前端开发中，与用户进行交互是至关重要的，而键盘操作是用户与网页交互的重要方式之一。JavaScript 提供了一系列键盘事件，其中 keydown 和 keyup 事件是处理按键按下与释放操作的关键事件。本文将深入探讨这两个事件的特性、用法以及实际应用场景。

1. `keydown` 和 `keyup` 事件概述

keydown 事件：当用户按下键盘上的任意按键时触发该事件。如果用户持续按住某个按键，keydown 事件会连续触发，直到按键被释放。
keyup 事件：当用户释放键盘上已经按下的按键时触发该事件。每个按键按下并释放的过程中，keyup 事件只会触发一次。

2. 事件绑定方式

在 JavaScript 中，我们可以通过多种方式为元素绑定 keydown 和 keyup 事件，以下是常见的几种方法：

2.1 HTML 内联事件处理程序

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" id="myInput" onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
    <script>
        function handleKeyDown(event) {
            console.log('Key down:', event.key);
        }
        function handleKeyUp(event) {
            console.log('Key up:', event.key);
        }
    </script>
</body>
</html>

2.2 DOM 元素的事件属性

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.onkeydown = function (event) {
            console.log('Key down:', event.key);
        };
        input.onkeyup = function (event) {
            console.log('Key up:', event.key);
        };
    </script>
</body>
</html>

2.3 `addEventListener` 方法

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('keydown', function (event) {
            console.log('Key down:', event.key);
        });
        input.addEventListener('keyup', function (event) {
            console.log('Key up:', event.key);
        });
    </script>
</body>
</html>

推荐使用 addEventListener 方法，因为它允许为同一个元素的同一个事件绑定多个处理程序，并且遵循事件驱动编程的最佳实践。

3. 事件对象属性

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('keydown', function (event) {
            console.log('Key:', event.key);
            console.log('Code:', event.code);
            console.log('Alt Key:', event.altKey);
            console.log('Ctrl Key:', event.ctrlKey);
            console.log('Shift Key:', event.shiftKey);
        });
    </script>
</body>
</html>

4. 实际应用场景

4.1 快捷键功能

通过监听 keydown 事件，结合 ctrlKey、altKey 等属性，我们可以实现快捷键功能。例如，按下 Ctrl + S 保存表单数据：

<!DOCTYPE html>
<html lang="en">
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
    </form>
    <script>
        document.addEventListener('keydown', function (event) {
            if (event.ctrlKey && event.key === 's') {
                event.preventDefault(); // 阻止默认的保存页面操作
                const form = document.getElementById('myForm');
                // 模拟保存表单数据
                console.log('Form data saved:', form.serialize()); 
            }
        });
    </script>
</body>
</html>

4.2 游戏控制

在网页游戏中，keydown 和 keyup 事件可以用于控制游戏角色的移动。例如，按下方向键控制角色移动，释放按键停止移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #character {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="character"></div>
    <script>
        const character = document.getElementById('character');
        let speed = 5;
        let isMovingLeft = false;
        let isMovingRight = false;
        let isMovingUp = false;
        let isMovingDown = false;
        document.addEventListener('keydown', function (event) {
            if (event.key === 'ArrowLeft') {
                isMovingLeft = true;
            } else if (event.key === 'ArrowRight') {
                isMovingRight = true;
            } else if (event.key === 'ArrowUp') {
                isMovingUp = true;
            } else if (event.key === 'ArrowDown') {
                isMovingDown = true;
            }
        });
        document.addEventListener('keyup', function (event) {
            if (event.key === 'ArrowLeft') {
                isMovingLeft = false;
            } else if (event.key === 'ArrowRight') {
                isMovingRight = false;
            } else if (event.key === 'ArrowUp') {
                isMovingUp = false;
            } else if (event.key === 'ArrowDown') {
                isMovingDown = false;
            }
        });
        function moveCharacter() {
            let left = parseInt(character.style.left) || 0;
            let top = parseInt(character.style.top) || 0;
            if (isMovingLeft) {
                left -= speed;
            } else if (isMovingRight) {
                left += speed;
            }
            if (isMovingUp) {
                top -= speed;
            } else if (isMovingDown) {
                top += speed;
            }
            character.style.left = left + 'px';
            character.style.top = top + 'px';
            requestAnimationFrame(moveCharacter);
        }
        moveCharacter();
    </script>
</body>
</html>

5. 总结

keydown 和 keyup 事件是 JavaScript 中处理键盘操作的重要工具，通过监听这两个事件，我们可以实现各种与键盘交互相关的功能，如快捷键、游戏控制等。在实际开发中，我们需要根据具体需求选择合适的事件绑定方式，并合理利用事件对象的属性来实现所需的功能。同时，要注意处理好事件的默认行为，避免出现意外的结果。希望本文对你理解和应用 keydown 和 keyup 事件有所帮助。