關於瀏覽器的鍵盤事件偵測

關於瀏覽器的鍵盤事件偵測

前言

  最近在寫瀏覽器的鍵盤偵測，發現瀏覽器偵測的行為有點不直覺，而且有分"keydown"與"keypress"，在此做個紀錄。

內容

  首先是當按鍵壓住的時候，不論是"keydown"或"keypress"都會不斷地送事件，而且還發現偵測的時間相當不穩定!以下為測試程式碼:

var preTime=Date.now();
window.addEventListener("keydown",function(evt){
  switch(evt.keyCode){
    case 75:
      console.log("DelTime:"+(Date.now()-preTime) );
      preTime=Date.now();
      break;
  }
},true);

在測試程式碼當壓住"K"這個按鍵時，會發現事件不斷被啟動，並且可以看到每次的偵測的時間間隔，用chrome測試，大部分時間間隔是33，但還是會看到19或47的間隔時間。再來就是"keydown"與"keypress"的差異，這兩者差異在"keydown"事件觸發時所使用的"keyCode"是固定的，不會受到"caps lock"按鍵引響，例如測試程式所偵測的"keyCode"為75(ASCII的"K")，不論"caps lock"是否啟動，"keyCode"都是同一個，這點"keyup"也一樣，但"keypress"的狀況就不一樣，"keypress"的"keyCode"會受到"caps lock"的引響，可以利用以下測試程式碼:

window.addEventListener("keypress",function(evt){
  switch(evt.keyCode){
    case 75:
      console.log("Press K" );
      break;
    case 107:
      console.log("Press k" );
      break;
  }
},true);

在測試時按下"K"鍵並搭配"caps lock"後就可以看到差別了。

參考資料

KeyboardEvent keyCode Property