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

什么是鍵盤事件?鍵盤事件對(duì)象判斷用戶按鍵

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

什么是鍵盤事件

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

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

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

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

鍵盤事件對(duì)象判斷用戶按下了哪個(gè)鍵

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

為了讓大家更好地理解鍵盤事件的使用,下面我們通過案例的形式進(jìn)行展示。檢測(cè)用戶是否按下了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)輸入完畢后再進(jìn)行檢測(cè)。第6~8行代碼使用鍵盤事件對(duì)象里面的keyCode判斷用戶按下的是否是s鍵,如果是,則讓搜索框獲取焦點(diǎn),幫助用戶進(jìn)行輸入。






猜你喜歡:

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

DOM有多少事件級(jí)別?DOM事件級(jí)別

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

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

黑馬程序員web前端開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!