什么是鍵盤(pán)事件？鍵盤(pán)事件對(duì)象判斷用戶(hù)按鍵

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

什么是鍵盤(pán)事件

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

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

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

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

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

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

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

猜你喜歡：

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

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

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

Javascript事件類(lèi)型以及常用方法有哪些?

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

上一篇：do…while循環(huán)案例：計(jì)算1~100之間的所有整數(shù)的和 下一篇：JavaScript作用域分為哪幾種類(lèi)型？