JavaScript change 事件

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>

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

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

  • 7
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值