当元素的值已更改时,将发生HTML DOM onchange事件。当选中的状态已更改时,它也可以使用单选按钮和复选框。
注意:此事件与oninput事件类似,但唯一的区别是oninput事件在元素值更改后立即发生,而onchange事件在元素失去焦点时发生。
用法:
在HTML中:
<element onchange="myScript">
在JavaScript中:
object.onchange = function(){myScript};
在JavaScript中,使用addEventListener()方法:
object.addEventListener("change", myScript);
例:使用HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onchange Event</h2>
<select id="LangSelect" onchange="GFGfun()">
<option value="c">C</option>
<option value="java">JAVA</option>
<option value="html">HTML</option>
<option value="python">PYTHON</option>
</select>
<p id="demo"></p>
<script>
function GFGfun() {
var x = document.getElementById("LangSelect").value;
document.getElementById(
"demo").innerHTML = "You selected:" + x;
}
</script>
</center>
</body>
</html>
输出:
之前:
后:
例:使用JavaScript
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onchange Event</h2> Email:
<input type="email" id="email">
<script>
document.getElementById(
"email").onchange = function() {
GFGfun()
};
function GFGfun() {
var x = document.getElementById("email");
x.value = x.value.toLowerCase();
}
</script>
</center>
</body>
</html>
输出:
之前:
后:
例:在JavaScript中,使用addEventListener()方法:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onchange Event</h2> Email:
<input type="email" id="email">
<script>
document.getElementById(
"email").addEventListener(
"change", GFGfun);
function GFGfun() {
var x = document.getElementById("email");
x.value = x.value.toLowerCase();
}
</script>
</center>
</body>
</html>
之前:
后:
支持的浏览器:DOM onchange Event支持的浏览器如下:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML onchange用法及代码示例
- HTML touchcancel事件用法及代码示例
- HTML onwheel事件用法及代码示例
- HTML onunload事件用法及代码示例
- HTML touchmove事件用法及代码示例
- HTML onwaiting事件用法及代码示例
- HTML ondragover事件用法及代码示例
- HTML onended事件用法及代码示例
- HTML onmessage事件用法及代码示例
- HTML onsuspend事件用法及代码示例
- HTML onsubmit事件用法及代码示例
- HTML onabort事件用法及代码示例
- HTML transitionend事件用法及代码示例
- HTML onseeked事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM onchange Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。