在 JavaScript 中模擬按鍵

本文將討論如何在 JavaScript 中以程式設計方式觸發按鍵事件。

在 JavaScript 中使用 dispatchEvent 方法模擬按鍵

我們可以使用 dispatchEvent 方法來觸發特定事件。

例子：

window.addEventListener('keydown', (e) => {
    console.log(e)
})

window.dispatchEvent(new KeyboardEvent('keydown', {
    'key': 'b'
}));

點選這裡執行上面的程式碼。

監聽並觸發 keydown 事件

為了監聽 keydown 事件，我們使用 addEventListener 和’keydown’引數。然後通過使用 KeyboardEvent 例項呼叫 window.dispatchEvent 來觸發此事件。

在建構函式的第一個引數中，我們指定要觸發的鍵盤事件的型別。在第二個引數中，我們傳遞一個帶有選項的物件以在事件物件中設定。

因此，在登入回撥時執行 dispatchEvent 後 e.key 應該是 b。

如上所述，該程式可以在物件中設定更多選項。

例子：

window.addEventListener('keydown', (e) => {
  console.log(e)
})

window.dispatchEvent(new KeyboardEvent('keydown', {
    key: "b",
    keyCode: 66,
    code: "KeyE",
    which: 66,
    shiftKey: false,
    ctrlKey: false,
    metaKey: false
}));

點選這裡執行上面的程式碼。

為物件提供更多選項

我們要設定的鍵的數字程式碼是 keyCode。鍵名編碼在程式碼中，其中包含鍵盤鍵的編號。

如果我們除了要按的鍵之外還想按 Shift 鍵，我們可以將 shiftKey 設定為 true。

ctrlKey 決定我們是否要在當前鍵之外按下 Ctrl 鍵。如果我們要按下元鍵，我們將 metaKey 設定為 true。

元鍵是 PC 鍵盤上的 Windows 鍵，而它是 Mac 鍵盤上的 Command 鍵。

當事件被觸發時，我們應該會看到在 addEventListener 回撥中記錄的所有選項。它們應該與我們傳遞給 KeyboardEvent 建構函式的選項物件位於相同的 e 物件屬性中。

使用 keyup 事件，我們可以編寫相同的程式碼。在任何地方，我們都將 keydown 替換為 keyup。

我們甚至可以使用 JavaScript 中的 dispatch 方法通過事件物件來模擬按鍵事件。KeyboardEvent 建構函式可以建立具有各種選項的鍵盤事件。