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
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>

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

(Funciona en la versión en inglés)

Especificaciones

Especificación Estado
HTML Living Standard
La definición de 'change' en esta especificación.
Living Standard

Compatibilidad del navegador

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.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: IsraelFloresDGA
Última actualización por: IsraelFloresDGA,