在 JavaScript 中模擬按鍵

Shiv Yadav 2023年10月12日
在 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 來觸發此事件。

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

因此,在登入回撥時執行 dispatchEvente.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 建構函式可以建立具有各種選項的鍵盤事件。

作者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相關文章 - JavaScript Event