1. onchange

onchange 事件會在域的內容改變時觸發。支援的標籤, , ,。

注意：在元素的值改變了且失去焦點時觸發（兩次的值一樣不會觸發）。
缺陷：通過js程式碼改變DOM的值不會觸發，解決在js程式碼裡改值了呼叫其change 的*function()*或者調.change()方法。

JS：

<input type="text" id="cc" onchange="function()">

JQuery:

$("#cc").change(function(){});

2. onpropertychange

onpropertychange會實時觸發，會在元素的屬性改變時就觸發事件。當元素disable=true時不會觸發。

缺陷：只在IE 下支援，其他瀏覽器不支援，用oninput來解決。

JS：

<input type="text" id="cc" onpropertychange="functionName()">

3. oninput

oninput在或的值發生改變時觸發，不需要等到元素失去焦點，是實時的。它是html5的事件，可用於檢測文字類輸入框的值。

缺陷：從指令碼中修改值不會觸發事件。從瀏覽器下拉提示框裡選取值時不會觸發。IE9 以下不支援，所以IE9以下可用onpropertychange 事件代替。

JS：

<input type="text" oninput="functionName()">
 

JQuery:

$("#cc").on('input propertychange',functionName);

4. addEventListener

addEventListener()用於向指定元素新增事件方法。使用removeEventListener()移除新增的事件方法。IE9以下不支援，用attachEvent代替。

語法：element.addEventListener(event, function, useCapture)

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

5.jquery實時監聽input輸入框值的變化事件

只需要同時繫結 oninput 和 onpropertychange 兩個事件，獲取input元素,並實時監聽使用者輸入。

$('input').bind('input propertychange', function(){
	if($(this).val()){
		console.log("hhhhhhhh");
	}else{
		console.log("xxxxxxxx");
	}
})

但這並不完美，因為用的bind，所以當遇到追加的新input標籤時，則不能監聽了。

為了解決上面的問題，可以使用live替代

$('input').live('input propertychange', function()
{
  //獲取input 元素,並實時監聽使用者輸入
  //邏輯
})