引言

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

所有HTML元素（如按鈕、文本框、圖像）都可以包含可以使用 JavaScript 代碼觸發(fā)的事件。所有這些事件都是DOM的一部分（文檔對象模型）。在這里，將簡單介紹一下鍵盤事件。

鍵盤事件對象描述了用戶與鍵盤的交互，每個事件都描述了用戶與一個按鍵（或一個按鍵和修飾鍵的組合）的單個交互；事件類型keydown， keypress 與 keyup 用于識別不同的鍵盤活動類型。

• keydown：當(dāng)按下鍵盤上的某個鍵時觸發(fā)，并在按住該鍵時重復(fù)觸發(fā)。
• keyup：當(dāng)釋放鍵盤上的鍵時觸發(fā)。
• keypress：當(dāng)按下 a、b 或 c 之類的字符鍵盤時觸發(fā)，而不是左箭頭鍵、home 或結(jié)束鍵盤，... 當(dāng)按住鍵盤上的鍵時，按鍵也會重復(fù)觸發(fā)。

處理鍵盤事件

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

• 首先，選擇將觸發(fā)鍵盤事件的元素，通常是表單元素。
• 然后，使用 element.addEventListener() 來注冊事件處理程序。

假設(shè)有以下帶有 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或標(biāo)簽來獲取元素。querySelector 和 querySelectorAll 之間的基本區(qū)別是 querySelectorAll 將返回具有相同類的 NodeList，而 querySelector 將獲取該類的單個元素。如果有多個具有相同類或標(biāo)簽的元素，那么它只會獲取第一個元素。

下面添加事件到相應(yīng)的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 接受一個參數(shù)，即 e 或 event ，該參數(shù)將是包含事件的所有屬性的對象。

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

現(xiàn)在將處理特殊鍵，如 Shift、Ctrl 和 Alt。

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

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

以上就是JavaScript 鍵盤事件的處理及屬性詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 鍵盤事件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論