input 輸入框的事件觸發及其順序

<input id="field" type="text" />
<input type="text" onkeyup="if(!/^\d+$/.test(this.value)) { this.value='';}" />
<script>
    function g(type,selector){
        if(type=="id") return document.getElementById(selector);
        if(type=="class") return document.getElementsByClassName(selector);
        if(type=="tag") return document.getElementsByTagName(selector);
        if(type=="tag") return document.getElementsByTagName(selector);
    }
        g("id","field").onkeyup=function(){
        console.log("onkeyup");
    }
        g("id","field").onkeypress=function(){
        console.log("onkeypress");
    }
        g("id","field").onkeydown=function(){
        console.log("onkeydown");
    }
            g("id","field").onfocus=function(){
        console.log("onfocus");
    }
        g("id","field").onchange=function(){
        console.log("onChange");
    }
        g("id","field").oninput=function(){
        console.log("onInput");
    }
          g("id","field").onblur=function(){
           console.log("onblur");
       }

     setTimeout(function(){    //通過腳本改變
　　　　　　g("id","field").value="lla";
　　　},2000)

　　

運行結果：

情況一：只點擊不輸入（沒有鍵盤事件）

 

情況二：點擊加輸入

onpress之后又出發了oninput事件

 

情況三:輸入完了，鼠標離開這個input

觸發了onchange和onblur事件

情況四:復制黏貼！

情況五：通過腳本添加

 

總結一下：

1.當你鼠標點擊進去時觸發onfocus（聚焦），離開時觸發onblur（失焦），這兩個當中會觸發onchange事件，也就是聚焦-->失焦有個onchange

2.當往文字框輸入文字時會觸發oninput事件，不管你是鍵盤輸入還是復制黏貼 

3,通過腳本添加文字，抱歉啥都不會觸發。。。。。

 

腳本添加什么都不會觸發？ IE下有一個方法增加字節，就會觸發    ----onpropertychange