JavaScript change 事件

admin發表於2018-11-07
JavaScript事件

change具有改變的意思，change事件會在元素資料發生變化的時候觸發。

下面需要解決兩個問題：

（1）.事件針對哪些元素有效。

（2）.哪些方式改變資料會觸發此事件。

關於事件處理函式註冊，可以參閱如何註冊事件處理函式一章節。

瀏覽器支援:

（1）.IE瀏覽器支援此事件。

（2）.edge瀏覽器支援此事件。

（3）.火狐瀏覽器支援此事件。

（4）.Opera瀏覽器支援此事件。

（5）.谷歌瀏覽器支援此事件。

（6）.safria瀏覽器支援此事件。

下面透過程式碼例項詳細介紹一下前面提出的兩個問題。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script> 
window.onload=function(){ 
  let otxt=document.getElementById("txt"); 
  otxt.onchange=function(){ 
    this.style.backgroundColor="green"; 
  } 
} 
</script> 
</head> 
<body> 
<input type="text" name="txt" id="txt" value="螞蟻部落" /> 
</body> 
</html>

為文字框註冊change事件處理函式，當文字框value修改後，文字框背景顏色被設定為綠色。

按照如下步驟操作：

（1）.修改文字框中的內容與預設值不同。

（2）.此時焦點依然位於文字框中。

可以發現，文字框的背景顏色並沒有改變，說明事件並沒有觸發。

在文字框，change事件觸發的條件是，修改value值，且焦點離開文字框。

此事件內部其實進行了如下操作：

（1）.當焦點離開文字框之後，會比較文字框的值是否發生改變。

（2）.如果改變那麼觸發此事件，執行事件處理函式，否則不會觸發。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script> 
window.onload=function(){ 
  let otxt=document.getElementById("txt"); 
  let obt=document.getElementById("bt");
  otxt.onchange=function(){ 
    this.style.backgroundColor="green"; 
  } 
  obt.onclick=function(){
    otxt.value="softwhy.com";
  }
} 
</script> 
</head> 
<body> 
<input type="text" name="txt" id="txt" value="螞蟻部落" /> 
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

上述程式碼中，點選按鈕透過JavaScript動態修改文字框的值。

但是事件並沒有觸發，也就是說透過JavaScript動態改變文字框的值無法觸發該事件。

特別說明：在標準瀏覽器中，修改文字框的值，點選回車也會觸發該事件，低版本IE不支援。

上述這些特點對於<textarea>等元素也是如此，再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let ost=document.getElementById("st");
  var odiv=document.getElementById("ant");
  ost.onchange=function(){
    odiv.innerHTML=ost.options[ost.selectedIndex].text;
  }
}
</script>
</head>
<body>
<div id="ant"></div>
<select id="st">
  <option value="1">螞蟻部落一</option>
  <option value="2">螞蟻部落二</option>
  <option value="3">螞蟻部落三</option>
  <option value="4">螞蟻部落四</option>
</select>
</body>
</html>

上述程式碼，切換select下拉選單的選中項，同樣觸發change事件。

只要切換option項，事件會立馬觸發，對於HTML5新增的很多類似控制元件也是一樣。

例如<input type="month"/>，這裡不再一一列舉。

上面僅僅是列舉了比較常見的一些表單元素對於此事件的應用，很多其他表單元素也具有此事件。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script>
window.onload=function(){
  let radios=document.getElementsByTagName("input");
  for(let index=0;index<radios.length;index++){
    radios[index].onchange=function(){
        alert(index)
    }
  }
}
</script>
</head>
<body>
<form name="myform" method="post" action="do.php">
  性別：
  <input type="radio" name="sex" value="1" />男
  <input type="radio" name="sex" value="2" />女
</form>
</body>
</html>

切換單選按鈕，可以測試此事件的效果。

關於其他表單元素是否支援此事件，感興趣的可以自行測試。

相關文章