網站開發人員希望讀者以某種方式與他們的網站進行交互。訪問者可以上下滾動頁面、在輸入字段中寫入內容、單擊鏈接訪問另一個頁面，或者按組合鍵觸發特定行為。作為開發人員，您應該能夠捕獲所有這些事件并向用戶提供所需的功能。
在本教程中，我們的重點將是在 JavaScript 中處理鍵盤事件。我們將了解不同類型的鍵盤事件、處理特殊按鍵事件以及獲取有關按下或釋放的按鍵的信息。
鍵盤事件類型
鍵盤事件分為三種類型。這些稱為 keydown、keypress 和 keyup。
只要按下某個鍵，就會觸發 keydown 事件。所有鍵都會被觸發。它們是否產生角色價值并不重要。例如，按鍵盤上的 A 或 Alt 鍵將觸發 keydown 事件。
立即學習“Java免費學習筆記（深入）”；
keypress 事件已棄用。它僅在按下產生字符值的鍵時觸發。例如，按 A 鍵將觸發此事件，但按 Alt 鍵則不會。您應該考慮使用 keydown 事件來代替它。
當用戶按下的鍵被釋放時，將觸發 keyup 事件。
假設用戶連續按下鍵盤上的任意鍵。在這種情況下，keydown 事件將被重復觸發。一旦用戶釋放密鑰，就會觸發 keyup 事件。
監聽鍵盤事件
此時，我想提一些相當明顯的事情。鍵盤是一種輸入設備，用于從用戶那里獲取一些輸入。我們根據該輸入采取行動。但是，用戶還有其他方式發送輸入。
如果您想跟蹤用戶在表單中填寫的任何輸入字段，那么在所述輸入上使用其他事件（例如 change ）更有意義。
此外，鍵盤事件僅為可以接收焦點的元素生成。這包括 元素、
例如，除非設置 tabindex 或 contentEditable 屬性，否則您將無法偵聽段落元素上的鍵盤事件。但是，它最終會在 DOM 樹中冒泡，因此您仍然可以將 keydown 或 keyup 事件偵聽器附加到文檔。
這是一個例子：
document.addEventListener("keydown", keyIsDown); function keyIsDown(event) { // Do whatever you want! }
您還可以將回調作為箭頭函數提供：
document.addEventListener("keydown", (event) => { // Do whatever you want! });
從鍵盤事件獲取信息
在上一節的基本代碼片段中，我們定義了一個回調函數。該函數接受 event 對象作為其參數。此 event 對象包含您可能需要訪問的與 keydown 或 keyup 事件相關的所有信息。
以下是您應該了解的一些有用屬性：
- key：該屬性返回一個字符串，表示所按鍵的字符值。
- code：此屬性返回一個字符串，表示按下的物理鍵的代碼。
- repeat：如果長時間按住某個鍵，該屬性將返回布爾值 true，導致 keydown 事件多次觸發。
- altKey：如果用戶按下 Alt 鍵（在 Windows 上）或 Option 鍵（在在 macOS 上）當 keydown 事件觸發時。
- ctrlKey：如果用戶在 keydown 事件觸發時按下 Control 鍵，則此屬性返回布爾值 true。
- metaKey：如果用戶在 keydown 事件觸發時按下 Meta 鍵，則此屬性返回布爾值 true。
- shiftKey：如果用戶在 keydown 事件觸發時按下 Shift 鍵，則此屬性返回布爾值 true。
您會注意到，我在所有最后四個屬性描述中都包含了“當 keydown 事件被觸發時”部分。這意味著，如果在執行上述任一操作時按下 A 或 3 等鍵，這些屬性的值將為 true ，用于 keydown 事件。鍵也處于按下狀態。
重點關注以下 CodePen 演示后，嘗試按單個鍵或組合鍵，以查看不同屬性的值發生變化。
如果您按鍵盤頂部的 3 鍵而不按 Shift 鍵，則 key 屬性的值將變為 3 > 并且 code 屬性的值變為 Digit3。但是，按下 Shift 后，key 屬性的值將變為 #，而 code 屬性仍為 Digit3。
您可以嘗試使用其他組合鍵進行相同的操作，您會注意到 key 屬性的值會根據您按下的鍵而變化。但是，code 屬性的值保持不變。
鍵盤上的某些鍵通常是重復的。例如，有兩個 Shift 鍵。按左鍵會將 code 的值設置為 ShiftLeft。按右邊會將 code 的值設置為 ShiftRight。同樣，有兩組數字鍵。字母上方的代碼將為您提供 Digit
這意味著，如果您的代碼依賴于檢測特定鍵，則務必確保您使用 code 屬性來檢查按下了哪個鍵。
我想提的另一件重要的事情是，并不是每個人都使用 QWERTY 鍵盤，而且他們的鍵盤甚至可能不是英文的。在這種情況下，使用 key 屬性來檢查按下了哪個鍵很容易出錯。
響應鍵盤事件
現在我們知道了如何監聽鍵盤事件并從中提取信息，我們可以編寫一些代碼來對某些特定鍵的 keydown 和 keyup 事件做出反應?？紤]以下代碼片段：
const circle = document.querySelector(".circle"); document.addEventListener("keydown", (event) => { if (event.code == "KeyR" && event.repeat != true) { let rVal = Math.floor(200 + Math.random() * 200); circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`); } if (event.key == "B" && event.shiftKey == true) { let rVal = Math.floor(10 + Math.random() * 40); circle.setAttribute("style", `border: ${rVal}px solid orangered;`); } if (event.code == "ArrowUp" && event.repeat != true) { circle.classList.add("animate__animated", "animate__bounce"); } }); document.addEventListener("keyup", (event) => { if (event.code == "ArrowUp") { setTimeout(() => { circle.classList.remove("animate__animated", "animate__bounce"); }, 4000); } });
我們為 keydown 事件創建了一個偵聽器，并為 keyup 事件創建了另一個偵聽器。這兩個事件都附加到 document。
在 keydown 內，我們檢查三個不同的密鑰。我使用了 R 鍵的 event.code 屬性來向您展示您可以單獨按 R 鍵或與任何修飾鍵組合使用，并且它仍會將圓的半徑更改為隨機值。另一方面，我們使用 event.key 屬性來檢查其值是否為 B。僅當您同時按 Shift 和 B 時，此塊中的代碼才會執行??，因為這種組合會導致 event.key 屬性成為大寫“B”。
在 keyup 內，我們檢查 ArrowUp 鍵上的 keyup 事件。一旦鑰匙被解除，我們會在四秒的延遲后刪除之前附加的類。
以下 CodePen 演示展示了這一切的實際效果：
您應該嘗試在上述代碼中添加自己的邏輯，以便當用戶按下A、S、W鍵時圓圈會移動> 和D。
最終想法
在本教程中，我們學習了 JavaScript 中鍵盤事件的基礎知識。按下并釋放鍵盤上的按鍵將分別觸發 keydown 和 keyup 事件。與這些事件關聯的 event 對象包含您確定按下了哪個鍵并采取適當操作所需的所有信息。
請記住，鍵盤只是眾多可能的輸入設備之一。因此，使用鍵盤檢測任何輸入可能并不總是能達到預期效果。在這種情況下，您應該考慮使用與輸入相關的事件。
