HTMLElement : évènement 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.
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 <select>
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>
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
| Specification |
|---|
| HTML Standard # event-change |
| HTML Standard # handler-onchange |
Compatibilité des navigateurs
BCD tables only load in the browser