在 JavaScript 中,探索與鍵盤事件的基礎互動。
在與鍵盤事件互動時,有3種類型的事件:
- 「keydown」鍵盤按鍵已按下。
- 「keyup」鍵盤按鍵已釋放。
當鍵盤按鍵保持按下並且重複時,也會觸發「keydown」事件。
雖然通常會在特定元素上監聽滑鼠和觸控事件,但在文件上監聽鍵盤事件很常見:
document.addEventListener('keydown', event => {
// 按下按鍵
})
傳遞給事件監聽器的參數是KeyboardEvent。
此事件物件除了事件物件屬性外,還提供了其他一些獨有的屬性:
altKey
:如果事件觸發時按下了 Alt 鍵,則為 true。code
:按下的按鍵的代碼,以字串形式返回。ctrlKey
:如果事件觸發時按下了 Ctrl 鍵,則為 true。key
:按下的按鍵的值,以字串形式返回。locale
:鍵盤區域化值。location
:按鍵在鍵盤上的位置。metaKey
:如果事件觸發時按下了 Meta 鍵(例如 Command 鍵),則為 true。repeat
:如果該按鍵已重複(例如該按鍵尚未釋放),則為 true。shiftKey
:如果事件觸發時按下了 Shift 鍵,則為 true。
這個示例是一個按鍵記錄器,它會顯示我列出的部分屬性的值:
查看Key logger demo(@flaviocopes)在CodePen上的示例。