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' 鍵。這就像一個簡單的 "Simon Says" 遊戲，但使用的是鍵盤鍵！

範例：不使用 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 排列，最初是為了減慢打字員的速度嗎？它最初是為了防止打字機的金屬臂卡住而設計的。然而，現在我們使用這同樣的佈局來在我們的網頁應用程序中創造閃電般的交互！

繼續編程，繼續學習，最重要的是，樂在其中！下次見，這裡是你的親切友善的電腦老師，說再見。快樂編程！

Credits: Image by storyset