input 內容改變的觸發事件

1. onchange

onchange 事件會在域的內容改變時觸發。支持的標籤<input type="text">, <textarea>, <select>,<keygen>。

注意： 在元素的值改變了且失去焦點時觸發（兩次的值同樣不會觸發）。

缺陷：經過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在<input>或<textarea>的值發生改變時觸發， 不須要等到元素失去焦點，是實時的。它是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)