文章結束給大家來個程式設計師笑話：[M]

    按下鍵盤時會觸發鍵盤事件，次序為keydown -> keypress ->keyup。

    1、keydown、keypress事件觸發在文字還沒敲進文字框，這時如果在keydown、keypress事件中輸出文字框中的文字，得到的是觸發鍵盤事件前的文字，而keyup事件觸發時全部鍵盤事件的操作已完成，獲得的是觸發鍵盤事件後的文字

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown 
 
= function() {
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    console.log('onkeyup ' + this.value);
}
</script>

    onkeydown default
onkeypress default
onkeyup default1

    2、keypress事件與keydown和keyup的主要區別

    1）對中文輸入法支撐欠好，沒法響應中文輸入

    2）沒法響應系統功能鍵（如delete，backspace）

    3）由於前面兩個制約，keyCode與keydown和keyup不是很始終

    3、在keyup事件中沒法阻止瀏覽器默許事件，因為在keypress時，瀏覽器默許行為已完成，即將文字輸入文字框（儘管這時還沒顯示），這個時候不論是preventDefault還是return false，都不能阻止在文字框中輸入文字的行為，如要阻止在文字框中輸入文字，必須在keydown或keypress時阻止

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    //return false;
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    //return false;
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    return false;
    console.log('onkeyup ' + this.value);
}
</script>

    4、textInput事件

    文字框的鍵盤響應事件把textInpput也加進來，觸發的次序為：keydown -> keypress ->textInput -> keyup

    textInput事件是DOM3後支撐的，主要用來替換keypress，與keypress的主要差異在於添加了對中文輸入法的支撐，還有一點就是textInput只在可編輯文字區才能觸發（如input、textarea），而keypress是任何能獲得焦點的控制元件的能觸發（如button），但是textInput事件的支撐還不是很好，目前只有safari、chrome支撐。

文章結束給大家分享下程式設計師的一些笑話語錄： 一個合格的程式設計師是不會寫出 諸如 “摧毀地球” 這樣的程式的，他們會寫一個函式叫 “摧毀行星”而把地球當一個引數傳進去。