HTMLElement : évènement change

L'évènement change est déclenché sur les éléments <input>, <select> et <textarea> lorsque la personne modifie la valeur de l'élément. À la différence de l'évènement input, l'évènement change n'est pas nécessairement déclenché à chaque modification unitaire de la valeur de l'élément.

Selon le type d'élément modifié et l'interaction avec l'élément, l'évènement change pourra se déclencher à un moment différent :

• Quand un élément <input type="checkbox"> est coché ou décoché (au clic ou au clavier) ;
• Quand un élément <input type="radio"> est sélectionné (mais pas lorsqu'il est désélectionné) ;
• Lorsque l'utilisatrice ou l'utilisateur applique le changement explicitement (par exemple en sélectionnant une valeur dans une liste déroulante <select> à l'aide du clic de la souris, en sélectionnant une date dans un sélecteur <input type="date">, ou en sélectionnant un fichier dans le sélecteur de fichiers <input type="file">, etc.) ;
• Lorsque l'élément perd le focus après que la valeur a été changée pour les éléments où il s'agit de saisir une valeur plutôt que d'en sélectionner une, comme <textarea> ou les champs tels que <input type="text">, <input type="search">, <input type="url">, <input type="tel">, <input type="email">, ou <input type="password">.

La spécification HTML liste les types d'éléments <input> qui devraient déclencher l'évènement change.

Syntaxe

On utilisera le nom de l'évènement dans des méthodes telles que addEventListener() ou alors on utilisera une propriété globale de gestion d'évènements telle que onchange.

addEventListener("change", (event) => {});

onchange = (event) => {};

Type d'évènement

Un évènement générique de type Event.

Exemples

Avec un élément <code>&lt;select&gt;</code>

HTML

<label>
  Choisissez un parfum de glace :
  <select class="ice-cream" name="ice-cream">
    <option value="">Choisir parmi…</option>
    <option value="chocolat">chocolat</option>
    <option value="sardine">sardine</option>
    <option value="vanille">vanille</option>
  </select>
</label>

<div class="result"></div>

body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}

JavaScript

const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");

selectElement.addEventListener("change", (event) => {
  result.textContent = `Vous avez choisi ${event.target.value}`;
});

Résultat

Avec un champ texte

Pour certains éléments, dont <input type="text">, l'évènement change ne se déclenche pas tant que le contrôle n'a pas perdu le focus. Essayez de saisir quelque chose dans le champ ci-après, puis cliquez autre part afin de déclencher l'évènement.

HTML

<input placeholder="Veuillez saisir un texte" 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;
}

Résultat

Spécifications

Compatibilité des navigateurs