JavaScript change 事件

最新推荐文章于 2024-08-13 15:07:27 发布

470368525

最新推荐文章于 2024-08-13 15:07:27 发布

阅读量2.5w

点赞数 7

分类专栏： javascript 文章标签： JavaScript

javascript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

change具有改变的意思，change事件会在元素数据发生变化的时候触发。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

下面需要解决两个问题：

（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不支持。

上述这些特点对于等元素也是如此，再来看一段代码实例：

[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新增的很多类似控件也是一样。

例如，这里不再一一列举。

上面仅仅是列举了比较常见的一些表单元素对于此事件的应用，很多其他表单元素也具有此事件。

代码实例如下：

[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>

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

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