change

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

L'événement change est déclenché pour les éléments <input>, <select>, et <textarea> lorsqu'un changement dans 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

Propriété 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">.
  • Quand l'utilisateur réalise le changement de manière explicite (en sélectionnant une valeur venant d'un <select> d'un menu déroulant avec le clique d'une souris, en sélectionnant une date d'un date picker pour <input type="date">, en sélectionnant un fichier d'un file picker 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 example, 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> (see bug 126379).

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

Exemples

Un exemple incomplet qui ne fonctionne probablement pas sur tous les navigateurs, avec jsfiddle: http://jsfiddle.net/nfakc/5/.

Exemple: L'événement change sur <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>

Voir aussi

Cet événement est aussi déclenché danns plusieurs APIs non-standard:

Compatibilités navigateurs

Selon QuirksMode, Firefox et Chrome ont été compatibles depuis un certain temps, mais IE9 et les versions antérieures à IE10 ont un support incomplet.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Kalwyn, karyngaudreau
 Dernière mise à jour par : Kalwyn,