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.
Informations générales
- Spécification
- HTML5
- Interface
Event- Propagation
- Oui
- Annulable
- Non
- Cible
- Element
- Action par défaut
- Non défini
-
Propriétés
| Property | Type | Description |
|---|---|---|
target Lecture seule |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Lecture seule |
DOMString |
The type of event. |
bubbles Lecture seule |
Boolean |
Whether the event normally bubbles or not. |
cancelable Lecture seule |
Boolean |
Whether the event is cancellable or not. |
Description
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 126379).
La spécification HTML répertorie les types <input> qui doivent déclencher l'événement change.
Exemples
Exemple : L'événement "change" sur un <select>
Le code suivant gère l'événement change sur <select> en appellant 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>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>vanilla</option>
</select>
</body>
</html>
Le code Javascript est simple :
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[name="ice-cream"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
// Vous pouvez utiliser “this” pour vous référer à l'élément sélectionné.
if(!event.target.value) alert('Please Select One');
else alert('You like ' + event.target.value + ' ice cream.');
}Le résultat ressemble à ça :
Un exemple incomplet qui ne fonctionne probablement pas sur tous les navigateurs, avec jsfiddle: http://jsfiddle.net/nfakc/5/.
Voir aussi
Cet événement est aussi déclenché dans plusieurs API non-standard:
NetworkInformation.connectiondéclenche l'événement change lorsque les informations de connexions changent.DeviceStorageChangeEventest déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| HTML Living Standard La définition de 'change' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de 'change' dans cette spécification. |
Recommendation | |
| Document Object Model (DOM) Level 2 Events Specification La définition de 'change' dans cette spécification. |
Obsolete | Définition initiale |
Compatibilités navigateurs
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |