一、觸發條件

當某個物件有焦點且有監聽keydown、keypress、keyup事件時，通過按下鬆開鍵盤的某個鍵來觸發

二、區分

1、觸發區分

• keydown是按下鍵盤的任何鍵觸發
• keypress是按下鍵盤的鍵，且能翻譯為ASCII字元才會觸發
• keyup則是按下鍵盤的鍵，在鬆開時觸發

keydown在按下的時候返回鍵盤上的程式碼值，然後由TranslateMessage函式翻譯成字元，並且由keypress返回字元值。

所以也可以理解為，keydown獲取鍵盤的程式碼值，而keypress獲取鍵盤的字元值（ASCII字元），keydown和keyup更加高階，處理更加複雜一些。

【按下鍵盤的鍵不鬆開，則會一直觸發keydown和keypess（如果keypress能觸發）】

【按下shift + 1，再同時鬆開，keydown和keyup觸發兩次，中間keypress觸發一次，keypress返回的key為！，而keydown和keyup返回的key分別是shift和！】

2、觸發順序

keydown、keypress、keyup

3、屬性區分

1）keycode

keypress事件的keycode屬性返回的是字元程式碼，即ASCII字元對應的值

keydown、keyup事件的keycode屬性返回的是鍵盤程式碼，即鍵盤上真實按鍵對應的數字

eg.

比如按下鍵盤的字母A

keypress的keycode為97

keydown、keyup的keycode為65

2）charcode

表示的是keypres觸發按鍵的字元程式碼，僅適用ASCII字元

按下非字元鍵，以及keydown和keyup返回的charcode，值是0

3）which

和keycode一樣，只是不相容IE8以下瀏覽器

相容性寫法：keycode = event.which || event.keycode

三、不同瀏覽器相容性

IE：只有keycode,【高版本IE有which，但IE8以下沒有which】

Firfox：只有charcode和which

Opera：只有keycode和which

Chrome：keycode、charcode、which都有

四、使用例子

輸入框輸入限制只有空格和數字

const oInput = document.getElementById("input");
    // 鍵盤輸入限制【空格和數字】
    oInput.addEventListener("keypress", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      const key = e.keycode || e.which || e.charcode;
      if (key != 32 && (key < 48 || key > 57)) {
        e.preventDefault();
      }
    });
    // 儲存原始value,用於恢復
    let currentValue = oInput.value || "";
    oInput.addEventListener("input", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      if ( /^[0-9]*$/.test(target.value)) {
        currentValue = target.value;
      } else {
        target.value = currentValue;
        target.setSelectionRange(selection.selectionStart, selection.selectionEnd);
      } 
    });
    // 更新儲存游標位置
    let selection = {};
    oInput.addEventListener("keydown", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      selection = {
        selectionStart: target.selectionStart,
        selectionEnd: target.selectionEnd
      }
    });

參考

https://search.chongbuluo.com/

https://www.cnblogs.com/xcsn/p/3413074.html

https://mp.weixin.qq.com/s/p3fO8mt87ngalH11kk6WOg

-----smile