前言

在做web開發時候很多時候都需要即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。而採用onchange時間又往往是在輸入框失去焦點（onblur）時候觸發，有時候並不能滿足條件。

首先看一下dom中元素事件：

• onpropertychange： IE下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以啟用該事件。 在用js指令碼改動該元素值時候亦能觸發onpropertychange事件。
• oninput：是onpropertychange的非IE瀏覽器版本，支援firefox和opera等瀏覽器，但有一點不同，它綁定於物件時，並非該物件所有屬性改變都能觸發事件，它只在物件value值發生改變時奏效。
• onchange： (a)當前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（指令碼觸發無效）；(b)當前物件失去焦點(onblur)；

jQuery用法

$("#input1").bind("input propertychange",function(event){
       console.log($("#input1").val())
});

原生Js

  <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
 

        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
 
 
</script>
 //Input標籤
 <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />