El evento change
se dispara para elementos <input>
, <select>
, y <textarea>
cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento input
, el evento change
no es disparado necesariamente por cada alteración al valor value
del elemento
Burbujas | Sí |
---|---|
Cancelable | No |
Interfaz | Event |
Propiedad del manejador del evento | onchange |
Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento change
dispara en un momento diferente:
- Cuando el elemento es
:checked
(ya sea dando click o usuando el teclado) para elementos<input type="radio">
y<input type="checkbox">
; - Cuando el usuario confirma el cambio explícitimante (por ejemplo, al seleccionar un valor de un menú desplegable
<select>
con un clic del ratón, al seleccionar una fecha de un selector de fecha de un elemento<input type="date">
, al seleccionar un archivo en un selector de archivo por un elemento<input type="file">
, etc.); - Cuando un elemento pierde el foco después de que su valor haya sido cambiado, pero no confirmado (es decir, despues de editar el valor de un elemento
<textarea>
o<input type="text">
).
La especificaciones HTML listan los tipos de <input>
que deberían disparar el evento change
.
Ejemplos
Ejemplos Live: Elemento select
HTML
<label>Elija un sabor de nieve:
<select class="nieve" name="nieve">
<option value="">Seleccione Uno …</option>
<option value="chocolate">Chocolate</option>
<option value="sardina">Sardina</option>
<option value="vainilla">Vainilla</option>
</select>
</label>
<div class="resultado"></div>
body {
display: grid;
grid-template-areas: "select result";
}
select {
grid-area: select;
}
.resultado {
grid-area: result;
}
JS
const selectElement = document.querySelector('.nieve');
selectElement.addEventListener('change', (event) => {
const resultado = document.querySelector('.resultado');
resultado.textContent = `Te gusta el sabor ${event.target.value}`;
});
Resultado
Elemento de entrada de texto
Para algunos elementos, incluyendo <input type="text">
, el evento change
no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.
HTML
<input placeholder="Enter some text" name="name"/>
<p id="log"></p>
JavaScript
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('change', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Result
Especificaciones
Especificación | Estado |
---|---|
HTML Living Standard La definición de 'change' en esta especificación. |
Living Standard |
Compatibilidad en navegadores
No compatibility data found. Please contribute data for "api.HTMLElement.change_event" (depth: 1) to the MDN compatibility data repository.
Diferentes navegadores no siempre concuerdan cuando un evento change
debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos <select>
nunca disparan el evento change
en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <select>
(ver error 126379). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.