HTMLElement: Evento change
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
Specification |
---|
HTML Standard # event-change |
HTML Standard # handler-onchange |
Compatibilidad con navegadores
BCD tables only load in the browser
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.