JavaScript 鍵盤事件的處理及屬性詳解

2023-01-20 14:01:57

引言

JavaScript 中的事件，當用戶或瀏覽器嘗試操作頁面時，就會發生事件來處理 JavaScript 與HTML的互動。正如大家所知，JavaScript 與HTML一起工作，因此，頁面載入、單擊按鈕、最小化視窗、單擊滑鼠、敲打鍵盤等發生的一切都是事件。就像在單擊按鈕時向用戶顯示任何訊息一樣，這是通過事件發生的。

所有HTML元素（如按鈕、文字方塊、影象）都可以包含可以使用 JavaScript 程式碼觸發的事件。所有這些事件都是DOM的一部分（檔案物件模型）。在這裡，將簡單介紹一下鍵盤事件。

鍵盤事件物件描述了使用者與鍵盤的互動，每個事件都描述了使用者與一個按鍵（或一個按鍵和修飾鍵的組合）的單個互動；事件型別keydown， keypress 與 keyup 用於識別不同的鍵盤活動型別。

keydown：當按下鍵盤上的某個鍵時觸發，並在按住該鍵時重複觸發。
keyup：當釋放鍵盤上的鍵時觸發。
keypress：當按下 a、b 或 c 之類的字元鍵盤時觸發，而不是左箭頭鍵、home 或結束鍵盤，... 當按住鍵盤上的鍵時，按鍵也會重複觸發。

處理鍵盤事件

要處理鍵盤事件，需要執行以下步驟：

首先，選擇將觸發鍵盤事件的元素，通常是表單元素。
然後，使用 element.addEventListener() 來註冊事件處理程式。

假設有以下帶有 id 的文字方塊 message：

<input type="text" id="message">

新增事件的程式碼如下：

let msg = document.getDocumentById('message');
msg.addEventListener("keydown", (event) => {
    // 事件處理邏輯
});
msg.addEventListener("keypress", (event) => {
    // 事件處理邏輯
});
msg.addEventListener("keyup", (event) => {
    // 事件處理邏輯
});

鍵盤事件屬性

鍵盤事件有兩個重要的屬性：key 和 code 。key 屬性返回已按下的字元，而 code 屬性返回物理鍵碼。

下面主要簡單說明一下JavaScript程式碼部分。

首先，將 DOM 元素賦值給變數以便通過 JavaScript 操作這些元素。

const events = document.querySelector(".event");
const keyEvent = document.querySelector(".event-key .event-value");
const keyCodeEvent = document.querySelector(".event-keyCode .event-value");
const CodeEvent = document.querySelector(".event-code .event-value");
const whichEvent = document.querySelector(".event-which .event-value");
const shiftKey = document.querySelector(".key-shift .key-status");
const ctrlKey = document.querySelector(".key-ctrl .key-status");
const altKey = document.querySelector(".key-alt .key-status");

querySelector 和 querySelectorAll 基本上是使用 className 來獲取 Html 元素。它們可用於通過類、ID或標籤來獲取元素。querySelector 和 querySelectorAll 之間的基本區別是 querySelectorAll 將返回具有相同類的 NodeList，而 querySelector 將獲取該類的單個元素。如果有多個具有相同類或標籤的元素，那麼它只會獲取第一個元素。

下面新增事件到相應的DOM元素：

function keyboardEvents(e) {
    e.preventDefault();
    activeKey(e);
    if (e.key === " ") {
        keyEvent.style.fontStyle = "italic";
        keyEvent.textContent = "(space)";
    } else {
        keyEvent.textContent = e.key;
        keyEvent.style.fontStyle = "normal";
    }
    keyCodeEvent.textContent = e.keyCode;
    CodeEvent.textContent = e.code;
    whichEvent.textContent = e.which;
}

keyboardEvents 接受一個引數，即 e 或 event ，該引數將是包含事件的所有屬性的物件。

e.preventDefault() 將阻止瀏覽器的預設行為，·例如：按功能鍵。
從 DOM 獲取的所有元素都有一些屬性，textContent 就是其中之一，它將更新元素的內容。
e 有一些屬性，e.keyCode、e.key 是附加到鍵盤事件的屬性之一，而其他事件如 click、dblclick、change等將包含不同的屬性。
將事件監聽器附加到 window，這個是全域性元素，事件將委託到 window 下的所有元素。
當按下/按下鍵盤鍵時，將觸發 keydown 事件。

現在將處理特殊鍵，如 Shift、Ctrl 和 Alt。

function specialKeys(e) {
    shiftKey.textContent = e.shiftKey;
    ctrlKey.textContent = e.ctrlKey;
    altKey.textContent = e.altKey;
}

e.shiftKey、e.ctrlKey 和 e.altKey 將分別根據是否按下鍵返回布林值 true 或 false。並且此函數分配給兩個事件偵聽器，因為在按下鍵時，它將更新值，並且在按下鍵時，它將返回 false。

以上就是JavaScript 鍵盤事件的處理及屬性詳解的詳細內容，更多關於JavaScript 鍵盤事件的資料請關注it145.com其它相關文章！

JavaScript 鍵盤事件的處理及屬性詳解

目錄

引言

處理鍵盤事件

鍵盤事件屬性

熱門文章