在 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
程式碼塊將檢查從函式返回的鍵標籤是否與給定的鍵標籤匹配。如果是,則執行該塊,並顯示一條訊息。
現在,當我們可以記住更容易記住的助記鍵標籤時,我們不必記住每個鍵的鍵碼。當我們不知道按鍵程式碼並涉足邏輯時,這非常方便。