首頁技術(shù)文章正文

什么是鍵盤事件？鍵盤事件對象判斷用戶按鍵

更新時間:2022-03-17 來源:黑馬程序員 瀏覽量:

什么是鍵盤事件

鍵盤事件是指用戶在使用鍵盤時觸發(fā)的事件。例如，用戶按Esc鍵關(guān)閉打開的狀態(tài)欄，按Enter鍵直接完成光標(biāo)的上下切換等。下面列舉幾個常用的鍵盤事件，如表所示。

事件名稱事件觸發(fā)時機
keypress某個鍵盤按鍵被按下時觸發(fā)。不識別功能鍵，如Ctrl、Shit、箭頭等
keydown某個鍵盤按鍵被按下時觸發(fā)
keyup某個鍵盤按鍵被松開時觸發(fā)

需要注意的是，keypress事件保存的按鍵值是ASCⅡ碼，keydown和keyup事件保存的按鍵值是虛擬鍵碼，keydown和keypress如果按住不放的話，會重復(fù)觸發(fā)該對應(yīng)事件。keyup和keydown事件不區(qū)分字母大小寫，而keypress區(qū)分字母大小寫。

在發(fā)生keydown和keypress事件時，event事件對象的keycode屬性會包含一個值，該值與鍵盤上的特定值對應(yīng)。keycode的值與ASCⅡ碼對應(yīng)的值相同，例如，keycode值為13表示Enter鍵，keycode值為9表示Tab鍵。讀者可參考MDN等手冊進行查看，此處不再詳細列舉。

鍵盤事件對象判斷用戶按下了哪個鍵

鍵盤事件也有相應(yīng)的鍵盤事件對象KeyBoardEvent,該對象是跟鍵盤事件相關(guān)的一系列信息的集合。根據(jù)鍵盤事件對象中的keyCode屬性可以得到相應(yīng)的ASCIⅡ碼值，進而可以判斷用戶按下了哪個鍵。

為了讓大家更好地理解鍵盤事件的使用，下面我們通過案例的形式進行展示。檢測用戶是否按下了s鍵，如果按下s鍵，就把光標(biāo)定位到搜索框里面，示例代碼如下:

<body>
  <input type="text">
  <script>
    var search = document.querySelector ('input');
    document.addEventListener('keyup', function (e)  {
      if  (e.keyCode === 83)  {
        search.focus();
      }
    });
  </script>
</body>

上述代碼中，第5行代碼綁定了鼠標(biāo)彈起事件，當(dāng)輸入完畢后再進行檢測。第6~8行代碼使用鍵盤事件對象里面的keyCode判斷用戶按下的是否是s鍵，如果是，則讓搜索框獲取焦點，幫助用戶進行輸入。






猜你喜歡：

什么是事件？怎樣調(diào)用事件處理程序？

DOM有多少事件級別？DOM事件級別

Watch機制的通知狀態(tài)和事件類型

Javascript事件類型以及常用方法有哪些?

黑馬程序員web前端開發(fā)培訓(xùn)
分享到：
在線咨詢 我要報名
和我們在線交談！