HTMLElement : évènement change
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement change de l'interface HTMLElement est déclenché sur les éléments HTML <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'utilisateur·ice 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 de typetext,search,url,tel,email, oupasswordde l'élément HTML<input>.
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 # event-change |
| HTML # handler-onchange |
Compatibilité des navigateurs
Les navigateurs ne sont pas toujours d'accord sur le moment où l'évènement change doit être déclenché pour certains types d'interaction. Par exemple, la navigation au clavier dans les éléments HTML <select> ne déclenchait autrefois jamais d'évènement change dans Gecko tant que l'utilisateur·ice n'appuyait pas sur Entrée ou ne déplaçait pas la sélection en dehors du <select> (voir le bug Firefox 126379 (angl.)). Depuis Firefox 63 (Quantum), ce comportement est cependant cohérent entre les principaux navigateurs.