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>

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

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

JavaScript change 事件相关推荐

html input change,input与change事件区别
input与change事件区别属于前端实例代码,有关更多实例代码大家可以查看. 关于标题中两个事件的具体用法可以参阅如下两篇文章: (1).input事件参阅JavaScript input 事件一 ...
JavaScript --- 表单focus,blur,change事件的实现
假设有一个文本框,我们只允许用户输入数值.为此,我们希望: 1.利用focus事件修改文本框内容, 2.利用blur事件回复文本框的内容, 3.利用change事件在用户输入了非数值字符时再次修改背景 ...
javascript中change事件的用法
change 事件被<input>, <select>, 和<textarea> 元素触发.//触发情况 1.<input type="radio& ...
Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
jquery select change事件_jQuery实现省市联动效果
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
用jquery给Struts2的s:radio /标签添加change事件
用到Struts2的<s:radio/>标签时想给它添加一个change事件,由于此标签为页面自动生成一个radio组,不能像平常那样控制.网上说了一大堆,也没找到一个满意的.如果像以前那 ...
jquery radio/checkbox change 事件不能触发的问题
需求 <input type="radio" id="need" name="need" value="0" /& ...
Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
jQuery的change()事件
1.change()定义和用法当元素的值发生改变时,会发生 change 事件. 该事件仅适用于文本域(text field),以及 textarea 和 select 元素. change() 函 ...

JavaScript change 事件

JavaScript change 事件相关推荐

最新文章

热门文章