說說 input 輸入框的事件

從input框獲取焦點到，輸入值，失去焦點這個過程所有事件，以及一些特點；

1、過程

　　onfocus -> 鍵盤輸入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦點 ->  onchange -> onblur

　　如下，奉上代碼；

function handleFocus (event) {
        console.log('onfocus事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    };

    function handleKeyDown (event) {
        console.log('onkeydown事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    }

    function handleKeyPress (event) {
        console.log('onkeypree事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    }

    function handleKeyUp (event) {
        console.log('onkeyup事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    }

    function handleInput (event) {
        console.log('oninput事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    }

    function handleChange (event) {
        console.log('onchange事件...', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
    };

    function handleBlur (event) {
        console.log('onblue事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode)
    }

　　執行結果：

　　其實這個過程並沒有很意外，唯一感覺不太對勁的是 onchange 事件並不是每次輸入框值改變的時候觸發的，而是在失去焦點時候，並且在 onblur 之前觸發；

2、說說這些事件

　　onfocus

　　　　並沒有什麼特別的，就是當焦點轉移到（點擊，tab切換） input 框上邊的時候觸發；

　　onkeydown

　　　　鍵盤按下的時候觸發，但是此時按下的值並沒有被輸入到 input ，所以，此時的 value 沒有值，或者說它的值 只能是之前的舊值

　　　　  另外，此時可以阻止按鍵的預設事件；

　　 onkeypress

　　　　按鍵在按下之後，並且是按鍵鬆開之前觸發的；

　　　　  和 keydown 一樣不能獲取新的到 value；此時，也可以阻止按鍵的預設事件；

　　　　  但是這個事件對一下按鍵的支持不好，一些非輸入性質的按鍵（如；delete, backspare）不支持；（除enter）；

　　oninput

　　　　這個事件很賊，它的觸發時機，從上面就可以看到，onpress 之後 onkeyup 之前；

　　　　  此時，已經可以拿到 value，不能拿到keycode，不可以阻止預設事件了 ；

　　　　  關鍵是這貨明明是每次輸入框的值變化時候出發的，搶了onchange 的飯碗；

　　　　  另外，這東西是新的，IE9以下不支持，需要使用 onpropertychange；

　　　　  還有這貨，僅僅在input， textarea 支持；

　　onkeyup

　　　　  按鍵在鬆開之後觸發的；

　　　　 能獲取新的到 value，keycode；此時，不可以阻止按鍵的預設事件；

　　onchange

　　　　  你敢說這是你認識的onchange嗎？反正我是不敢；在失去焦點之後觸發的，明明是 onchange 為什麼是在失去焦點後觸發的，還偏偏比 onblur 快；

　　　　 能獲取新的到 value，不能拿到 keycode；此時，不可以阻止按鍵的預設事件；

　　onblur

　　　　  失去焦點時候觸發，但是還是比 onchange 慢了；

　　　　 能獲取新的到 value，不能拿到 keycode；