JavaScript - 键盘事件

你好，未来的JavaScript大师们！今天，我们将要进入键盘事件的精彩世界。作为你友好的计算机老师，我将会一步步引导你进行这次冒险。所以，拿起你最喜欢的饮料，坐下来，让我们一起开始这段键盘之旅！

常见键盘事件

在我们开始编码之前，让我们先熟悉JavaScript中最常见的键盘事件。把这些事件想象成计算机以不同的方式监听你的键盘：

事件名称	描述
keydown	当一个键被按下时触发
keypress	当一个键被按下时触发（仅限字符键）
keyup	当一个键被释放时触发

这些事件就像计算机的耳朵，一直在监听你的按键。酷吧？

键盘事件属性

现在，让我们来谈谈这些事件携带的属性。当发生键盘事件时，它会带来一些有用的信息：

属性	描述
key	被按下的键的值
keyCode	被按下的键的Unicode值（已弃用）
which	被按下的键的Unicode值（已弃用）
code	键盘上的物理键

这些属性就像小使者，携带关于你按下的键的重要细节。

示例：Keydown事件

让我们从第一个示例开始。我们将创建一个简单的程序，它监听'keydown'事件并显示按下的键。

<h1>按任意键</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = '你按下了: ' + event.key;
});
</script>

在这个示例中，我们在告诉计算机：“嘿，监听任意键的按下，当发生时，显示我们按的是哪个键。”addEventListener方法就像设置一个间谍来监视按键。

示例：Keypress事件

现在，让我们试试'keypress'事件。记住，这个事件只适用于字符键！

<h1>输入些什么</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
var current = document.getElementById('output').innerHTML;
document.getElementById('output').innerHTML = current + event.key;
});
</script>

这个脚本有点像打字机。每次你按下一个字符键，它都会把那个字符添加到已有的内容上。它在你打字时构建文本！

示例：Keyup事件

让我们继续前进到'keyup'事件。这次，我们将创建一个小游戏，你需要按下正确的键来获胜。

<h1>按下's'键来获胜！</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = '你赢了！?';
} else {
document.getElementById('output').innerHTML = '再试一次！';
}
});
</script>

在这个游戏中，我们在等待玩家释放's'键。这就像一个简单的“西蒙说”游戏，但是用键盘键！

示例：不使用addEventListener方法

现在，让我们看看处理事件的旧方法。虽然addEventListener是现代方法，但你可能会在旧代码中遇到这种方法：

<h1>按任意键</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = '按下的键: ' + event.key;
};
</script>

这种方法直接将一个函数赋值给文档的onkeydown属性。这就像在门上放一个牌子，上面写着：“当有人敲门时，做这个。”

把它们放在一起

现在我们已经单独探索了这些事件，让我们创建一个更复杂的示例，它使用所有三个事件：

<h1>键盘事件测试器</h1>
<p>按任意键来触发事件！</p>
<table id="eventTable">
<tr>
<th>事件类型</th>
<th>键</th>
<th>代码</th>
</tr>
</table>

<script>
function addEventToTable(eventType, event) {
var table = document.getElementById('eventTable');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = eventType;
cell2.innerHTML = event.key;
cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
addEventToTable('keyup', event);
});
</script>

这个示例创建了一个表格，当你按键时会填充。这就像一个键盘事件的日记，记录发生的每个键事件！

这就是了，朋友们！我们已经穿越了JavaScript键盘事件的领域。记住，熟能生巧，所以不要害怕实验这些示例。改变它们，破坏它们，修复它们——这样你才能真正学会。

在我们结束之前，这里有一个有趣的事实：你知道吗，计算机键盘的布局，也就是QWERTY排列，最初是为了减慢打字速度而设计的？它是为了打字机而创造的，以防止金属臂卡住。然而现在，我们使用这个相同的布局在我们的Web应用程序中创建闪电般的交互！

继续编码，继续学习，最重要的是，继续享受乐趣！下次见，这是你友好的计算机老师，告别了。快乐编码！

Credits: Image by storyset