input與change事件區別

admin發表於2018-11-09
事件

關於標題中兩個事件的具體用法可以參閱如下兩篇文章：

（1）.input事件參閱JavaScript input 事件一章節。

（2）.change事件參閱JavaScript change 事件一章節。

兩個事件非常類似，甚至對於某些元素它們兩者的表現完全相同。

它們都可以在元素的值或者內容發生改變時觸發，但區別也是非常明顯。

區別主要表現的如下兩點：
（1）.瀏覽器相容。

（2）.事件觸發的時機。

（3）.事件生效元素。

下面分別做一下介紹，以便在特定的需求選取恰當的事件。

一.瀏覽器相容性：

（1）.change事件相容所有主流瀏覽器。

（2）.input事件被IE9+和其他標準瀏覽器支援。

特別說明：propertychange事件與input事件類似，可以實時觸發，但是僅IE支援。

所以可以利用propertychange事件input的事件的全相容效果。

程式碼例項如下：

[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 oshow=document.getElementById("show");
  let count=0;
  if(document.all){
     otxt.onpropertychange=function(){
       count=count+1;
       oshow.innerHTML=count;
     }
  }
  else{
    otxt.oninput=function(){
      count=count+1;
      oshow.innerHTML=count;
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt"/>
</body>
</html>

上述程式碼實現了全相容效果，能夠實時計算出輸入文字框字元的數量。

二.觸發時機：

對於change事件：

（1）.單行文字域與多行文字域，當修改它們的值後，並不能立即觸發事件，而是焦點離開它們才能觸發。

（2）.單行文字域與多行文字域修改前與修改後的值不能相同，否則不能觸發。

對於input事件：

（1）.事件會同步觸發，一旦值改變立即觸發。

對於select下拉選單、核取方塊和單選按鈕等元素，只要它們的狀態發生改變，兩個事件都會觸發，表現相同。

三.設定contenteditable為true的元素：

在HTML5之前，div等類似元素是不可編輯的，這幾乎是定論。

但是在HTML5之後，一切都發生了改變。

只要為此類元素新增contenteditable屬性（預設值為true），那麼這些元素都變為可編輯的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#one,#two{
  width:150px;
  height:60px;
  margin:5px;
  background-color:#ccc;
}  
</style>  
<script> 
window.onload=function(){
  let count=0;
  one.oninput=function(){
    show.innerHTML=++count+"input";
  }
  two.onchange=function(){
    show.innerHTML=++count+"change";
  }
}
</script> 
</head> 
<body> 
<div id="one" contenteditable></div>
<div id="two" contenteditable></div>
<div id="show"></div>
</body> 
</html>

程式碼分析如下：

（1）.首先將兩個div元素設定為可編輯狀態。

（2）.然後兩個div元素分別註冊input與change事件。

（3）.當編輯div元素中內容的時候，input事件會同步觸發，然而change事件不會觸發。

特別說明：id屬性值由於在文件中是唯一的，所以可以直接作為對應的元素物件使用。

相關閱讀：

（1）.innerHTML屬性可以參閱JavaScript innerHTML一章節。

（2）.contenteditable屬性可以參閱HTML contenteditable 屬性一章節。

相關文章