El evento onchange HTML DOM ocurre cuando se cambia el valor de un elemento. También funciona con botones de radio y casillas de verificación cuando se ha cambiado el estado marcado.
Nota: Este evento es similar al evento oninput pero la única diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco.
Sintaxis:
En HTML:
<element onchange="myScript">
En JavaScript:
object.onchange = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("change", myScript);
Ejemplo: uso de 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>
Salida:
Antes: 
Después: 
Ejemplo: Uso de 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>
Salida:
Antes: 
Después:
Ejemplo: en JavaScript, usando el método 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>
Antes:
Después:
Navegadores compatibles: los navegadores compatibles con DOM onchange Event se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA