事件类型——常见的键盘事件及应用
键盘事件是前端交互的重要组成部分，通过 keydown 和 keyup 可以精准监听用户的按键行为，结合 key 和 code 属性实现多样化的逻辑。在实际开发中，需根据场景选择合适的事件和属性，并注意兼容性和性能优化。
一、键盘事件基础：三种核心事件
1. keydown 事件
触发时机：
用户按下任意按键时触发（持续按住会重复触发）。
用途：
监听按键按下动作，常用于实时响应（如游戏控制、快捷键检测）。
示例：
<body><input type="text" id="input"><script> const input = document.getElementById('input'); input.addEventListener('keydown', (event) => {console.log(`按下了 ${event.key} 键`);});</script>
</body>
2. keyup 事件
触发时机：
用户释放已按下的按键时触发。
用途：
监听按键释放动作，常用于处理最终输入（如搜索框输入完成后触发搜索）。
示例：
<body><input type="text" id="searchInput"><script>const searchInput = document.getElementById('searchInput');searchInput.addEventListener('keyup', (event) => {if (event.key === 'Enter') {console.log('触发搜索');}});</script>
</body>
3. keypress 事件（逐渐弃用，谨慎使用）
触发时机：
用户按下能产生字符的按键（如字母、数字，不包括功能键如 Shift、Enter）。
缺点：
兼容性差，且无法区分字符大小写（如 A 和 a 可能返回相同值），现代开发中推荐使用 keydown 或 keyup 替代。
二、事件对象属性：获取按键信息
1. key：按键的字符值（推荐使用）
-
返回用户输入的字符（如 ‘a’、‘1’、‘Enter’），受键盘布局和输入法影响。
-
示例：按下字母 A（小写键盘）返回 ‘a’，按下 Enter 返回 ‘Enter’。
2. code：按键的物理代码（推荐使用）
-
返回按键的物理位置代码（如 ‘KeyA’、‘Enter’），不受键盘布局和输入法影响，适合检测功能键（如 F1、方向键）。
-
示例：无论键盘布局如何，字母 A 对应的 code 始终是 ‘KeyA’，Enter 对应 ‘Enter’。
3. 过时属性：keyCode 和 which
-
keyCode 返回按键的 ASCII 码（如 A 是 65），但无法区分大小写和特殊字符，已被废弃。
-
现代开发中请使用 key 或 code。
三、实战示例：打造键盘操作反馈工具
需求：
创建一个输入框，实时显示用户按下和释放的按键信息（包括 key 和 code）。
步骤 1：HTML 结构
<!DOCTYPE html>
<html>
<head><title>键盘事件实战</title>
</head>
<body><input type="text" id="input" placeholder="输入内容..."><div id="log"></div> <script src="script.js"></script>
</body>
</html>
步骤 2：JavaScript 逻辑（script.js）
const input = document.getElementById('input');
const log = document.getElementById('log');
// 监听按键按下事件
input.addEventListener('keydown', (event) => {log.innerHTML += `<div>按下：${event.key}（code: ${event.code}）</div>`;
});
// 监听按键释放事件
input.addEventListener('keyup', (event) => {log.innerHTML += `<div>释放：${event.key}（code: ${event.code}）</div>`;
});
效果：
输入框中每一次按键操作，都会在下方实时显示 key 和 code 的值。
四、进阶技巧：处理组合键和特殊功能
1. 检测组合键（如 Ctrl + C）
通过 event.ctrlKey、event.shiftKey、event.altKey 判断是否按下控制键：
input.addEventListener('keydown', (event) => {// 检测 Ctrl + Cif (event.ctrlKey && event.key === 'c') {console.log('触发复制操作'); } // 检测 Shift + 字母（大写输入） if (event.shiftKey && /[a-z]/.test(event.key)) {console.log('输入大写字母'); }
});
2. 阻止默认行为（如禁止输入特殊字符）
通过 event.preventDefault() 阻止浏览器默认操作：
input.addEventListener('keydown', (event) => {// 禁止输入数字 if (/[0-9]/.test(event.key)) {event.preventDefault(); // 阻止输入 alert('不能输入数字！'); }
});
五、注意事项
-
兼容性：keypress 事件在不同浏览器中表现不一致，优先使用 keydown 和 keyup。
-
key vs code：
- key 用于获取用户输入的字符（如文本输入场景）。
- code 用于检测物理按键（如游戏中的方向键控制）。
- 性能：持续触发的 keydown 可能导致高频事件，建议通过 防抖（debounce） 优化。
六、练习任务
-
实现一个搜索框，当用户按下 Enter 键时触发搜索功能。
-
禁止文本框输入特殊字符（如 !@#$%）。
-
检测 Ctrl + Shift + S 组合键，触发保存操作。
