6.2     Les événements



Un événement en JavaScript est une fonction destinée aux objets que la page peut contenir (boutons, images, liens, formulaires, ...).

Ces fonctions ne s'activent qu'à la suite d'une action bien précise de l'utilisateur (un clic, une touche du clavier, un mouvement de souris, un changement de taille de fenêtre). Ces événements se placent généralement dans les balises HTML et lorsqu'ils sont activés, appellent une fonction.

Voici quelques événements que nous allons utiliser. Pour une liste exhaustive, cliquez ici.


L'événement   onload

Cet événement se produit lorsque le navigateur a terminé le chargement d'une page HTML et de tous les cadres (FRAMES) de l'élément.

C'est le message que vous avez eu à la fin du chargement de cette page.

     <head>
     <script  type="text/javascript">
     function message(){
     alert("C'est l'exemple classique");
     }
     </script>
     </head>
     <body onload="message()">
      ...
     </body>

L'événement   onclick

Cet événement se produit lorsque l'utilisateur enfonce puis relâche le bouton de la souris (en gros un clic) sur :

     <head>
     <script  type="text/javascript">
     function message(){
     alert("C'est l'exemple classique");
     }
     </script>
     </head>
     <body>
     ...
     <input type="button" value="Cliquez ici" onclick="message()"/>
      ...
     </body>


L'événement   onchange

Cet événement se produit lorsque l'utilisateur modifie la valeur d'une liste, d'une boîte à liste déroulante, d'une boîte texte (input) ou d'une boîte texte multiligne (textarea) :

     <head>
     <script  type="text/javascript">
     function upperCase(x){
     var y = document.getElementById(x).value;
     document.getElementById(x).value = y.toUpperCase()
     }
     </script>
     </head>
     <body>
      ...
     <p>Entrez votre nom :<input type="text" id="nom" onchange="upperCase(this.id)"></p>
      ...
     </body>

Entrez votre nom :


Les événements   onmouseover  et  onmouseout

L'événement onmouseover se produit à chaque fois que le pointeur de la souris entre dans une zone contenant un lien ou une image.

L'événement onmouseout se produit à chaque fois que l'utilisateur déplace le pointeur de la souris hors d'une zone contenant un lien ou une image.


     <img name="photo" src="./ImagesJS/Images/kodakcamera1.jpg" 
            onmouseover="photo.src='./ImagesJS/Images/kodakcamera2.jpg'" 
                  onmouseout="photo.src='./ImagesJS/Images/objectcamera.jpg'">