在 JavaScript 中檢測箭頭鍵的按下情況
本教程介紹瞭如何使用某些內建函式來建立快捷方式並設定熱鍵，這些函式在 JavaScript 中偵聽使用者的輸入。本文還將詳細介紹 JavaScript 中的事件和事件監聽器。
什麼是事件
從編碼的角度來看，我們進行的物理活動會引起一個事件。這些事件是程式執行的驅動力；它在使用圖形使用者介面 (GUI) 時很有幫助。
我們可以通過使用事件偵聽器過程來製作這些快捷方式和熱鍵，該過程偵聽特定事件並將此資訊傳遞給處理程式以處理事件。
簡而言之，輸入按下的鍵（滑鼠或鍵盤），我們也可以直接使用處理這些事件的事件處理程式。我們將深入演示這兩種正規化。
JavaScript 中最常見的 EventListeners 是什麼
JS 中有很多事件處理函式，這兩個是最常見的，它們的作用是：
keydown：當你按下一個鍵時註冊，如果你按住它會持續註冊keyup：釋放鍵時註冊
JavaScript 中的 Keydown 事件監聽器
.onkeydown 事件處理程式告訴編譯器在按下所需的鍵後立即執行某個 function()；通過放置一個 alert("message")，我們可以顯示一個包含指定訊息的警報框。
在下面的程式碼中，我們使用了兩個事件屬性，.key，它將返回按下的鍵的標籤，以及 .keyCode，它返回特定鍵的程式碼。這些鍵碼類似於 ASCII，因為每個鍵都對映到特定的字母數字值。
在我們的示例中，我們輸入 k 作為函式引數。
document.onkeydown = function(e) {
alert(e.key + e.keyCode); // shows k75
};
一旦按下特定鍵，我們就會收到一條警報，顯示按下的鍵與其鍵程式碼連線。按鍵標籤和按鍵程式碼使操作程式碼邏輯更容易，廣泛用於事件驅動的操作。
讓我們看一個例子，展示我們如何利用這些引數來發揮我們的優勢。
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left'); // show the message saying left"
break;
case 38:
alert('up'); // show the message saying up"
break;
case 39:
alert('right'); // show the message saying right"
break;
case 40:
alert('down'); // show the message saying down"
break;
}
};
在這裡，我們使用一個簡單的 switch case，它接收按鍵程式碼，檢查它屬於哪個 case，並評估它以顯示一條訊息。假設我們按下左箭頭鍵；然後它將顯示 left 警報，依此類推。
我們也可以用這種方式定義事件監聽器：
document.addEventListener('keydown', function(event) {});
在這裡，我們看一下另一種正規化，以及它與我們以前的方法有何不同：
document.addEventListener('keydown', function(event) {
if (event.key == 'ArrowLeft') {
alert('Left key'); // show the message saying Left key"
} else if (event.key == 'ArrowUp') {
alert('Up key'); // show the message saying Up key"
} else if (event.key == 'ArrowRight') {
alert('Right key'); // show the message saying Right key"
} else if (event.key == 'ArrowDown') {
alert('Down key'); // show the message saying Down key"
}
});
這段程式碼似乎給出了與我們之前的程式碼相同的輸出。儘管如此，這裡還是有一個問題，這裡我們沒有明確地使用鍵程式碼來玩弄我們的邏輯，而是直接使用諸如向下箭頭和向上箭頭之類的鍵標籤並比較它們以顯示所需的訊息。
假設我們按下了向上箭頭，那麼我們的 if 程式碼塊將檢查從函式返回的鍵標籤是否與給定的鍵標籤匹配。如果是，則執行該塊，並顯示一條訊息。
現在，當我們可以記住更容易記住的助記鍵標籤時，我們不必記住每個鍵的鍵碼。當我們不知道按鍵程式碼並涉足邏輯時，這非常方便。