admin管理员组文章数量:1573361
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/" />
<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/" />
<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";
}
}
</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/" />
<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/" />
<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>
切换单选按钮,可以测试此事件的效果。
关于其他表单元素是否支持此事件,感兴趣的可以自行测试。
本文标签: 事件JavaScriptChange
版权声明:本文标题:JavaScript change 事件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727746031a1127811.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论