HTML DOM onkeydown

学习目标

理解 onkeydown 事件的触发机制与应用场景
掌握在 HTML、JavaScript 中绑定 onkeydown 事件的三种方式
能够使用 addEventListener 实现键盘交互功能
了解该事件的浏览器兼容性及元素限制

什么是 onkeydown 事件

onkeydown 是 HTML DOM（文档对象模型）中的一个事件，当用户按下任意键盘按键时触发。它常用于实现键盘快捷键、输入验证、游戏控制等需要响应按键操作的功能。

注意：该事件在按键按下瞬间触发，即使按住不放也会持续触发（取决于浏览器和系统设置）。

支持的 HTML 元素

onkeydown 事件可应用于几乎所有 HTML 元素，但以下元素不支持：

<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>

这些元素通常不参与用户交互或不可聚焦，因此无法接收键盘事件。

三种绑定方式

1. 直接绑定

<element onkeydown="myScript()">

示例：

<input type="text" onkeydown="handleChangeColor()">

2. 属性赋值

object.onkeydown = function() {
    myScript();
};

示例：

document.getElementById("myInput").onkeydown = function() {
    this.style.backgroundColor = "yellow";
};

3. `addEventListener()`

object.addEventListener("keydown", myScript);

这是最灵活、符合现代 Web 标准的方式，允许多个监听器绑定到同一事件。

实战示例

使用 addEventListener 监听按键

以下代码演示了当用户在输入框中按下任意键时，背景色变为黄色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onkeydown 示例</title>
</head>
<body>
    <h1 style="color: green;">
        编程学习网
    </h1>
    <p>请在下方输入框中按下任意键</p>
    <input type="text" id="inputField" style="background-color: green; padding: 8px;">

    <script>
        document.getElementById("inputField").addEventListener("keydown", handleKeydown);

        function handleKeydown() {
            document.getElementById("inputField").style.backgroundColor = "yellow";
        }
    </script>
</body>
</html>

初始状态：输入框背景为绿色
用户按下任意键（如 A、Enter、空格等）：背景立即变为黄色
每次按键都会触发颜色变化（即使重复按同一个键）

提示：若需获取具体按下的键，可通过事件对象的 key 或 keyCode 属性（推荐使用 event.key）。

事件对象与进阶用法

在事件处理函数中，可以接收一个 事件对象（Event） 参数，用于获取按键信息：

function handleKeydown(event) {
    console.log("按下的键:", event.key);      // 如 "a", "Enter", "ArrowUp"
    console.log("键码（已废弃）:", event.keyCode); // 不推荐使用
}

常见应用场景：

限制输入内容（如只允许数字）
实现快捷键（如 Ctrl + S 保存）
游戏角色移动控制

重点总结

onkeydown 在按键按下时触发，适用于可聚焦元素
推荐使用 addEventListener("keydown", handler) 绑定事件
可通过事件对象获取按键详情（使用 event.key）
不支持的元素多为非交互性元数据标签
所有现代浏览器均支持此事件

思考题

onkeydown、onkeypress 和 onkeyup 三个事件的触发顺序是什么？各自适用场景有何不同？
如果希望用户按下回车键时提交表单，应如何编写 onkeydown 事件处理函数？
为什么 <div> 默认不能触发 onkeydown？如何让它可以响应键盘事件？（提示：tabindex 属性）