1、keydown

當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。

是在文本框發(fā)生變化之前被觸發(fā)的，keydown事件中拿不到當(dāng)前按下的鍵的值。但是可以通過e.keyCode來獲得當(dāng)前按鍵的值。不過有兼容性問題。
keyCode屬性的值與ASCII碼中小寫字母或數(shù)字對應(yīng)的編碼相同。

//html
<input type="text" name="input" id="myInput" value="1">

//js
document.getElementById('myInput').addEventListener('keydown',function(e){
    console.log(e.type);
    console.log(e.target.value);
    console.log(e.keyCode);
})

2、keypress

當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。按下功能鍵不會(huì)觸發(fā)。
在所有瀏覽器中，按下能夠插入或刪除字符的鍵都會(huì)觸發(fā)keypress事件。

與keydown一樣，可以通過e.keyCode獲得當(dāng)前按下的鍵值。也可以通過charCode獲得當(dāng)前按下的鍵所代表字符的ASCII編碼。charCode只有在發(fā)生keypress事件時(shí)才包含值，此時(shí)的keyCode通常等于0或者也可能等于所按鍵的鍵碼。
要想以跨瀏覽器的方式取得字符編碼，必須首先檢測charCode屬性是否可用，如果不可用則使用keyCode。
在取得了字符編碼之后，就可以用String.formCharCode()將其轉(zhuǎn)換成實(shí)際的字符。

if(typeof e.charCode == 'number'){
   return e.charCode;
}else{
  return e.keyCode;
}

3、keyup

當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)。

說明

在用戶按了一下鍵盤上的字符鍵時(shí)，首先會(huì)觸發(fā)keydown事件，然后緊跟著是keypress事件，最后會(huì)觸發(fā)keyup事件。其中，keydown和keypress都是在文本框發(fā)生變化之前被觸發(fā)的；而keyup事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)的。如果用戶按下一個(gè)字符健不放，就會(huì)重復(fù)觸發(fā)keydown和keypress事件，走到用戶松開鍵為止。
如果用戶按下的是一個(gè)非字符鍵，那么首先會(huì)觸發(fā)keydown事件，然后就是keyup事件。如果按住這個(gè)非字符鍵不放，那么就會(huì)一直重復(fù)觸發(fā)keydown事件，走到用戶松開這個(gè)鍵，此時(shí)會(huì)觸發(fā)keyup事件。

textInput

此事件只有在能觸發(fā)keypress的情況下才會(huì)觸發(fā)，是對keypress的補(bǔ)充，用意是在將文本顯示給用戶之前更容易攔截文本。在文件插入文本框之前后觸發(fā)textInput事件。
目前兼容性不太好，firefox（50.1.0）不支持,chrome（版本 55.0.2883.95 (64-bit)）、safari（版本 9.1.2）支持，其它瀏覽器未試過。

觸發(fā)順序（在支持此事件的瀏覽器中）：

• keydown
• keypress
• textInput
• keyup

通過e.data獲取當(dāng)前的按鍵值

備注

這是一篇學(xué)習(xí)《Javascrpt高級程序設(shè)計(jì)》（第3版）的學(xué)習(xí)筆記，之所以發(fā)出來是因?yàn)樵诰W(wǎng)上查找textInput事件時(shí)看到一些文章對keypress的描述不準(zhǔn)確。