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.

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

const selectElement = document.querySelector('.nieve');

selectElement.addEventListener('change', (event) => {
    const resultado = document.querySelector('.resultado');
    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
});

Resultado

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

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.