Update vs en-US to fix #24031

files/fr/web/api/htmlelement/change_event/index.md

@@ -1,61 +1,51 @@
 ---
-title: change
+title: "HTMLElement : évènement change"
 slug: Web/API/HTMLElement/change_event
+l10n:
+  sourceCommit: 8d83c05362120cbba32c165a6b1f76e73ccc9674
 ---
 
 {{APIRef}}
 
-L'événement **change** est déclenché pour les éléments {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ et {{HTMLElement("textarea")}} _(zone de texte)_ lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement [`input`](/fr/docs/Web/API/HTMLElement/input_event), **change** n'est pas nécessairement déclenché pour chaque changement de valeur.
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Propagation</th>
-      <td>Oui</td>
-    </tr>
-    <tr>
-      <th scope="row">Annulable</th>
-      <td>Non</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("Event")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Gestionnaire d'événements</th>
-      <td>
-        {{domxref("GlobalEventHandlers/onchange", "onchange")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-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 {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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](https://bugzil.la/126379)).
-
-[La spécification HTML répertorie les types `<input>` qui doivent déclencher l'événement `change`.](https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply)
+L'évènement **`change`** est déclenché sur les éléments [`<input>`](/fr/docs/Web/HTML/Element/input), [`<select>`](/fr/docs/Web/HTML/Element/select) et [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) lorsque la personne modifie la valeur de l'élément. À la différence de [l'évènement `input`](/fr/docs/Web/API/Element/input_event), l'évènement `change` n'est pas nécessairement déclenché à chaque modification unitaire de la valeur de l'élément.
 
-## Exemples
+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&nbsp;:
+
+- Quand un élément [`<input type="checkbox">`](/fr/docs/Web/HTML/Element/input/checkbox) est coché ou décoché (au clic ou au clavier)&nbsp;;
+- Quand un élément [`<input type="radio">`](/fr/docs/Web/HTML/Element/input/radio) est sélectionné (mais pas lorsqu'il est désélectionné)&nbsp;;
+- Lorsque l'utilisatrice ou l'utilisateur applique le changement explicitement (par exemple en sélectionnant une valeur dans une liste déroulante [`<select>`](/fr/docs/Web/HTML/Element/select) à l'aide du clic de la souris, en sélectionnant une date dans un sélecteur [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), ou en sélectionnant un fichier dans le sélecteur de fichiers [`<input type="file">`](/fr/docs/Web/HTML/Element/input/file), etc.)&nbsp;;
+- 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>`](/fr/docs/Web/HTML/Element/textarea) ou les champs tels que [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text), [`<input type="search">`](/fr/docs/Web/HTML/Element/input/search), [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url), [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel), [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email), ou [`<input type="password">`](/fr/docs/Web/HTML/Element/input/password).
+
+La spécification HTML liste [les types d'éléments `<input>` qui devraient déclencher l'évènement `change`](https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply).
+
+## Syntaxe
+
+On utilisera le nom de l'évènement dans des méthodes telles que [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) ou alors on utilisera une propriété globale de gestion d'évènements telle que `onchange`.
+
+```js
+addEventListener("change", (event) => {});
+
+onchange = (event) => {};
+```
+
+## Type d'évènement
 
-### L'élément \<select>
+Un évènement générique de type [`Event`](/fr/docs/Web/API/Event).
+
+## Exemples
 
-Le code suivant gère l'évènement **change** sur [`<select>`](/fr/docs/Web/HTML/Element/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.
+### Avec un élément `<select>`
 
 #### HTML
 
 ```html
-<label
-  >Choose an ice cream flavor:
+<label>
+  Choisissez un parfum de glace :
   <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>
+    <option value="">Choisir parmi…</option>
+    <option value="chocolat">chocolat</option>
+    <option value="sardine">sardine</option>
+    <option value="vanille">vanille</option>
   </select>
 </label>
 
@@ -77,29 +67,29 @@ select {
 }
 ```
 
-#### Javascript
+#### JavaScript
 
 ```js
 const selectElement = document.querySelector(".ice-cream");
+const result = document.querySelector(".result");
 
 selectElement.addEventListener("change", (event) => {
-  const result = document.querySelector(".result");
-  result.textContent = `You like ${event.target.value}`;
+  result.textContent = `Vous avez choisi ${event.target.value}`;
 });
 ```
 
 #### Résultat
 
-{{ EmbedLiveSample('Lélément_select', '100%', '75px') }}
+{{EmbedLiveSample('Avec_un_élément_select', '100%', '75px')}}
 
-### L'élément d'entrée de texte
+### Avec un champ 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.
+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
 
 ```html
-<input placeholder="Enter some text" name="name" />
+<input placeholder="Veuillez saisir un texte" name="name" />
 <p id="log"></p>
 ```
 
@@ -118,7 +108,7 @@ function updateValue(e) {
 
 #### Résultat
 
-{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}
+{{EmbedLiveSample('Avec_un_champ_texte', '100%', '90px')}}
 
 ## Spécifications
 
@@ -127,10 +117,3 @@ function updateValue(e) {
 ## Compatibilité des navigateurs
 
 {{Compat}}
-
-## Voir aussi
-
-Cet événement est aussi déclenché dans plusieurs API non-standard:
-
-- {{domxref("NetworkInformation.connection")}} déclenche l'événement **change** lorsque les informations de connexions changent.
-- {{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.