在 JavaScript 中，change 事件型別時在表單元素的值發生變化時觸發，它主要用於 input、select 和 textarea 元素。對於 input 和 textarea 元素來說，當它們失去焦點且 value 值改變時觸發；對於 select 元素，在其選項改變時觸發，也就是不是去焦點，也會觸發 change 事件。
範例1
在下面範例中，當在第 1 個文字方塊中輸入或修改值時，則第 2 個文字方塊內會立即顯示第 1 個文字方塊中的當前值。
<input type="text" id="a" />
<input type="text" id="b" />
<script>
var a = document.getElementsByTagName("input")[0];
var b = document.getElementsByTagName("input")[1];
a.onchange = function(){ // 為第一個文字方塊系結change事件處理常式
b.value = this.value; // 把第一個文字方塊中的值傳遞給第二個文字方塊
}
</script>
範例2
下面範例演示了當在下拉選單框中選擇不同的網站時，會自動開啟該網站的首頁。
<select>
<option value="http://www.baidu.com/">百度</option>
<option value="http://www.google.cn/">Google</option>
</select>
<script>
var a = document.getElementsByTagName("select")[0];
a.onchange = function(){
window.open(this.value,""); // 根據下拉選單框的當前值開啟指定的網址
}
</script>
範例3
在其他表單元素中也可以應用 change 事件型別。下面範例演示了如何在無線電鈕選項組中動態顯示變化的值。
<input type="radio" name="r" value="1" checked="checked" /> 1
<input type="radio" name="r" value="2" /> 2
<input type="radio" name="r" value="3" /> 3
<script>
var r = document.getElementsByTagName("input");
for(var i = 0; i < r.length; i ++ ){
r[i].onchange = function(){
alert(this.value);
}
}
</script>
對於 input 元素來說，由於 change 事件型別僅在使用者已經離開了元素且失去焦點時觸發，所以當執行上面 3 個範例時會明顯感覺延遲響應現象。為了更好地提升使用者體驗，很多時候會根據需要定義在按鍵鬆開或滑鼠單擊時執行響應，這樣速度會快很多。
focus、blur 和 change 事件經常配合使用。一般可以使用 focus 和 blur 事件來以某種方式改變使用者介面，要麼是向使用者給出視覺提示，要麼是向介面中新增額外的功能。例如，為文字方塊顯示一個下拉選項選單。而 change 事件則經常用於驗證使用者在欄位中輸入的資料。
範例4
下面範例設計一個文字方塊，只允許使用者輸入數值。此時，可以利用 focus 事件修改文字方塊的背景顏色，以便更清楚的表明這個欄位獲得了焦點。可以利用 blur 事件恢復文字方塊的背景顏色，利用 change 事件在使用者輸入了非數位字元時再次修改背景顏色。
<form id="myform" method="post" action="javascript:alert('表單提交啦!')">
<p>
<label for="comments">請輸入數位:</label>
<br />
<input type="text" id="txtNumbers" name="numbers" />
</p>
<p>
<input type="submit" value="提交表單" id="submit-btn" />
</p>
</form>
<script>
var form = document.getElementById("myform");
var numbers = form.elements["numbers"];
numbers.onfocus = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "yellow";
}
numbers.onblur = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (/[^d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
}
numbers.onchange = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (/[^d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
}
numbers.focus();
</script>
在上面程式碼中，onfocus 事件處理程式將文字方塊的背景顏色修改為黃色，以清楚地表示當前欄位已經啟用。onblur 和 onchange 事件處理程式則會在發現非數值字元時，將文字方塊背景色修改為紅色。為了測試使用者輸入的是不是非數值，這裡針對文字方塊的 value 屬性使用了簡單的正規表示式。而且，為確保無論文字方塊的值如何變化，驗證規則始終如一，onblur 和 onchange 事件處理程式中使用了相同的正規表示式。
關於 blur 和 change 事件發生順序並沒有嚴格的規定，不同的瀏覽器沒有統一規定。因此，不能假定這兩個事件總會以某種順序一次觸發。