HTMLElement: Evento change

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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

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

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");
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

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.