change
======

L'événement **change** est déclenché pour les éléments `<input>` *(entrée)*, `<select>` *(sélection)* et `<textarea>` *(zone de texte)* lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement `input`, **change** n'est pas nécessairement déclenché pour chaque changement de valeur.

|  |  |
| --- | --- |
| Propagation | Oui |
| Annulable | Non |
| Interface | `Event` |
| Gestionnaire d'événements | `onchange` |

En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent :

* Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`*(case à cocher*).
* Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un `<select>` d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" *(sélecteur de date)* pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" *(sélecteur de fichier)* pour `<input type="file">`, etc.).
* Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de `<textarea>` ou `<input type="text">`).

Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments `<select>` ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du <select> (voir bug Firefox 126379).

La spécification HTML répertorie les types `<input>` qui doivent déclencher l'événement `change`.

Exemples
--------

### L'élément <select>

Le code suivant gère l'évènement **change** sur `<select>` en appelant la fonction `changeEventHandler()` dans l'attribut `onchange`. Il lit la valeur de la cible de l'évènement et la montre dans une alerte.

#### HTML


```html
<label
 >Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

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


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

select {
  grid-area: select;
}

.result {
  grid-area: result;
}
```


#### Javascript


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

selectElement.addEventListener("change", (event) => {
  const result = document.querySelector(".result");
  result.textContent = `You like ${event.target.value}`;
});
```


#### Résultat

### L'élément d'entrée de texte

Pour certains éléments, notamment `<input type="text">`, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.

#### HTML


```html
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
```


#### JavaScript


```js
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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

Cet événement est aussi déclenché dans plusieurs API non-standard:

* `NetworkInformation.connection` (en-US) déclenche l'événement **change** lorsque les informations de connexions changent.
* `DeviceStorageChangeEvent` est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.