現在有一個需求，需要我們實時監聽input輸入框中的內容，從而帶來更好的使用者體驗，而不是等我們全部輸入完畢才告訴我們格式不對

首先我們建立一個input輸入框

    <form name='loginForm'>
        <input type='text' name='user'/>
    </form>

接著獲取這個文字框

var loginForm=document.forms['loginForm'],
    user=loginForm.elements['user'];
    //無需設定input的id屬性，只設置name即可
 

方法一

change事件

user.onchange=function(){
    consolo.log(user.value);
}

沒錯，這個方法的確可以幫助我們解決監聽input輸入內容的需求，不過這個方法有一個致命的缺點，他不是實時監聽，只有input失去焦點且文字框內容發生改變才會觸發。
方法二

keydown事件

keypress事件

keyup事件

這是三個鍵盤事件，不過這三個事件還是有一些不同

1.當按一下任意鍵，會觸發onkeydown事件，如果不鬆開，將一直觸發。

2.當按一下字元鍵（比如abcd1234這些）會觸發onkeypress事件，如果不鬆開，將一直觸發這個事件。

3.當釋放鍵盤上的鍵，才觸發onkeyup事件。

4.按下一個鍵盤上的字元鍵，三種事件的觸發順序keydown -> keypress -> keyup

5.按下esc鍵，在firefox瀏覽器以及ie瀏覽器會觸發keypress事件，在chrome瀏覽器和Opera瀏覽器不會觸發keypress（js高階程式設計第三版P379頁的說法並不精確）

        user.onkeypress=function(){
            console.log(user.value);
        };
        user.onkeydown=function
 
(){
            console.log(user.value);
        };
        user.onkeyup=function(){
            console.log(user.value);
        }

實際檢測時會發現，keydown事件以及keypress事件會存在延遲，每次獲取的輸入值，都是之前的，總是慢半拍，原因是keydown與keypress總是在新值發生改變之前觸發。

最後發現只有keyup符合要求，不過keyup也不是完美的，缺點就是當你複製貼上值進去的時候，或者瀏覽器自動記住的值輸入進去的時候，keyup事件不會觸發

方法三

input事件

        user.oninput=function(){
            console.log(user.value);
        }

input事件就可以完美解決這個問題，不過他也有小缺點，那就是相容性問題，它不支援ie9以下的瀏覽器，不過還好，我們有一個ie專屬的事件propertychange()

總結：在解決需求的時候，一定要記得驗證相容性，不然又被測試小姐姐要求修改bug