JavaScript change 事件

小灰灰 2020-06-02 14:46 596阅读 0赞

# JavaScript change 事件

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.dandelioncloud.cn/" />  
<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.dandelioncloud.cn/" />  
<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="dandelioncloud.cn";
  }
} 
</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.dandelioncloud.cn/" />
<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.dandelioncloud.cn/" />
<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>
```

切换单选按钮，可以测试此事件的效果。

关于其他表单元素是否支持此事件，感兴趣的可以自行测试。