devstory

Le Tutoriel de Javascript ChangeEvent

Site d'apprentissage des langues gratuit:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- ChangeEvent

L'événement change se déclenche dans les situations suivantes :
  1. Des utilisateurs check/uncheck sur <input type="checkbox">.
  2. Des utilisateurs apportent des modifications sur <input type="radio">.
  3. Des utilisateurs modifient la valeur de  <input> (file, color, range).
  4. Des utilisateurs modifient le contenu de <input> ( text, number, email, password, tel, time, week, month, date, datetime-local, search, url), puis focus sur un autre endroit.
  5. Des utilisateurs modifient le contenu de <textarea>, puis focus sur un autre endroit.
  6. Des utilisateurs changent l'option sur l'élément <select>.
ChangeEvent  hérite de toutes les propriétés (property) et de la méthode d'interface Event.
Exemple avec l'événement de change :
changeevents-elements-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>ChangeEvent Example</title>
      <meta charset="UTF-8">

      <style>.title {font-weight:bold;}</style>

      <script>
          function changeHandler(evt)  {
            alert("Changed!");
          }
      </script>

   </head>
   <body>

      <h2>ChangeEvent example</h2>

      <p class="title">Input (checkbox, radio):</p>
      <input type="checkbox"  onchange ="changeHandler(event)"/>
      <input type="radio" name ="gender" value="M" onchange ="changeHandler(event)"/>
      <input type="radio" name ="gender" value="F" onchange ="changeHandler(event)"/>

      <p class="title">Input (range):</p>
      <input type="range" min ="1" max="10" onchange ="changeHandler(event)"/>

      <p class="title">Input (color):</p>
      <input type="color" onchange ="changeHandler(event)"/>

      <p class="title">Input (file):</p>
      <input type="file" onchange ="changeHandler(event)"/>


      <p class="title">Input (image, hidden, buton, submit, reset):</p>
        - (Not support 'change' event)

      <p class="title">Input (text, number, email, password, tel, time, week, month, date, datetime-local, search, url):</p>
      <input type="text" onchange ="changeHandler(event)"/>

      <p class="title">Textarea element</p>
      <textarea onchange ="changeHandler(event)" rows="3" cols="30"></textarea>

      <p class="title">Select:</p>
      <select onchange ="changeHandler(event)">
         <option value ="en">English</option>
         <option value ="de">German</option>
         <option value ="vi">Vietnamese</option>
      </select>

      <p id="log-div"></p>


   </body>
</html>
 
Exemple avec l'événement change sur l'élément <select> :
changeevents-select-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>ChangeEvent Example</title>
      <meta charset="UTF-8">

      <script>
          function changeHandler(evt)  {
            alert("Language: " + evt.target.value);
          }
      </script>

   </head>
   <body>

      <h2>ChangeEvent example</h2>

      <p class="title">Select Language:</p>
      <select onchange ="changeHandler(event)">
         <option value ="en">English</option>
         <option value ="de">German</option>
         <option value ="vi">Vietnamese</option>
      </select>


   </body>
</html>

 
Event: change vs input
Vous pouvez envisager d'utiliser l'événement input parce qu'il est assez similaire à l'événement change :
  • L'événement input xse produit immédiatement après que la valeur d'un élément change, sans que l'élément perde focus.
  • L'événement  input supporte les éléments avec les attributs (attribute) contenteditable="true". Alors que l'événement change ne prend en charge que les éléments​​​​​​​ <input>, <texarea>, <select>.