DIV CSS 佈局教程網

經常需要監聽鍵盤的事件，以便做更好的操作，基本原理是：監聽全局鍵盤，每一個鍵盤，當用戶按下某一按鍵時，返回對應的鍵值，然後再判斷用戶按下了哪一科按鍵，鍵值對應按鍵的名稱在最下面列出，自行比對。去以下介紹兩種不同的方式

原生鍵盤監聽事件：按下一次按鍵，分為三個過程，按下—按住—松開

onkeydown：某個鍵被按下
onkeypress：某個鍵盤的鍵被按下或按住
onkeyup：某個鍵盤的鍵被松開

使用方法，一般來說，鍵盤監聽是直接在整個頁面文檔上進行監聽的，也就是document上

以下是原生的使用案例

//實際使用 
document.onkeydown=function(e){  //對整個頁面文檔監聽 
var keyNum=window.event ? e.keyCode :e.which;  //獲取被按下的鍵值 
//判斷如果用戶按下了回車鍵（keycody=13） 

if(keyNum==13){ 
alert('您按下了回車'); 
} 
 
//判斷如果用戶按下了空格鍵(keycode=32)， 
if(keyNum==32){ 
   alert('您按下了空格'); 
  } 

剩下另外兩個按鍵方法同理

jquery的方式監聽鍵盤事件

jquery的也分為三個過程，但是在事件名稱上有所不同

keyup：某個鍵盤的鍵被松開

keydown：某個鍵被按下

keypress：某個鍵盤的鍵被按下或按住

使用方法：

$(document).keyup(function(event){ 
       switch(event.keyCode) { 
       case 27: 
       alert('您按下了回車'); 
       return; 
       case 13: 
       alert('您按下了空格'); 
       return; 
     
       } 
 }); 

小總結：總體來說，這兩種方式達到的效果都是一樣的，只是由於jquery的獲取對象更加簡單，所以一般更推介使用jquery，當然，如果你有jquery基礎的話。

以上就是小編為大家帶來的js監聽鍵盤事件的方法_原生和jquery的區別詳解全部內容了，希望大家多多支持~