HTMLElement: Evento change
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.
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
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>
JS
const selectElement = document.querySelector(".nieve");
const resultado = document.querySelector(".resultado");
selectElement.addEventListener("change", (event) => {
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 |
|---|
| HTML # event-change |
| HTML # handler-onchange |
Compatibilidad con navegadores
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 en Firefox). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.