devstory

La gestion des événements en JavaScript

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Javascript Events

L'événement (event) est un signal que quelque chose s'est produit. Par exemple, vous cliquez sur un bouton (button), ou vous fermez le navigateur, .. Tous les nœuds DOM génèrent (generate) de tels signaux, mais il existe des événements autres que le DOM par exemple, votre événement de fermeture de la fenêtre du navigateur. 
Vous trouverez ci-dessous une liste des événements DOM les plus utiles :
Mouse Events:
EvénementDescription
clickL'événement se produit lorsque l'utilisateur clique (click)sur un élément (element).
contextmenuL'événement se produit lorsque l'utilisateur clique avec le bouton droit (right-clicks) de la souris sur un élément pour ouvrir context-menu.
dblclickL'événement se produit lorsque l'utilisateur double-clique (double-clicks) sur un élément.

mousedownL'événement se produit lorsque l'utilisateur appuie sur un bouton de la souris sur un élément.
mouseupL'événement se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément.

mouseenterL'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
mouseleaveL'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.

mousemoveL'événement se produit lorsque le pointeur se déplace alors qu'il est au-dessus d'un élément.

mouseoutL'événement se produit lorsqu'un utilisateur déplace le pointeur de la souris hors d'un élément, ou hors de l'un de ses enfants.
mouseoverL'événement se produit lorsque le pointeur est déplacé sur un élément ou sur l'un de ses enfants.
Événements des éléments de Form.
EvénementDescription
submitLorsqu'un utilisateur submit (envoyer) le contenu d'un <form>.
focusLorsqu'un utilisateur se concentre (focus) à un élément, par exemple <input>.
blurLorsqu'un utilisateur quitte un élément, par exemple​​​​​​​ <input>.
Événements clavier :
EvénementDescription
keydownL'événement se produit lorsque l'utilisateur appuie sur une touche (key).
keyupL'événement se produit lorsque l'utilisateur relâche une touche

keypressL'événement se produit lorsque l'utilisateur appuie (press) sur une touche. (Effectuer 2 actions, appuyer et relâcher).
Des événements Document.
EvénementDescription
DOMContentLoadedLorsque le contenu HTML est téléchargé (loaded) et procédé. Le modèle DOM a été complètement créé.
Des événements CSS :
EvénementDescription
animationstartL'événement se produit lorsqu'une animation CSS a démarré.
animationendL'événement se produit lorsqu'une animation CSS a complété.
animationiterationL'événement se produit lorsqu'une animation CSS a répété.

Gestion des événements :

Pour gérer l'événement, vous devez attacher l'événement à un gestionnaire (handler). Le gestionnaire peut être une fonction. Lorsque l'événement se produit, le gestionnaire (handler) sera appelé à opérer. Le gestionnaire est un moyen d'exécuter des codes Javascript correspondant aux actions de l'utilisateur.
Le gestionnaire (handler) peut être défini dans le HTML avec l'attribut (attribute) on{event}. Par exemple, événement click :



<input value="Click me" onclick="alert('Click!')" type="button">

<input value="Click me" onclick="someFunction()" type="button">
 
L'objet this représente pour l'élément générant l'événement.


<input value="Click me" onclick="someFunction(this)" type="button">
Lorsque l'événement se déroule, Javascript crée l'objet event et vous pouvez l'utiliser comme valeur de paramètre.


<input value="Click me" onclick="someFunction(event)" type="button">
 
Vous pouvez également accéder à l'événement générateur d'événement via l'objet​​​​​​​ event.


var target =  event.target;

2- L'exemple avec des événements

Un événement simple et souvent rencontré est l'événement par lequel les utilisateurs cliquent (click) sur un élément. En voici un exemple simple. L'utilisateur clique sur le bouton "=" pour additionner deux chiffres.
onclick-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function doCalculate()  {
             var a = document.getElementById("a").value; // A String value
             var b = document.getElementById("b").value; // A String value

             var c = Number(a) + Number(b);

             document.getElementById("c").value = c;
         }
      </script>

   </head>
   <body>

      <h3>Click Event example</h3>

      <input id = "a" type="text" value= "100"/> <br/>
      + <br/>
      <input id = "b" type="text" value = "200"/> <br/>

      <button onclick="doCalculate()"> = </button> <br/>

      <input id = "c" type="text" value = ""/>

   </body>
</html>

 
-
L'objet this est l'élément qui émet l'événement. Vous pouvez passer (pass) cet objet dans la fonction de traitement des événements.
this-obj-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(target)  {
             var random = Math.round(Math.random() * 100) + 200;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Event with 'this' object</h3>

      <button onclick="changeSize(this)">Click Me to Change Size</button>

   </body>
</html>
-
Lorsque l'événement se produit, un objet event est créé par Javascript. Il contient les informations relatives à l'événement. Par exemple, pour l'événement souris, l'objet event peut contenir des informations telles que la position de la souris par rapport au navigateur, la position de la souris par rapport à l'élément qui émet l'événement, .... Vous pouvez utiliser l'objet event pour passer (pass) dans la fonction de traitement des événements.


<input value="Click me" onclick="someFunction(event)" type="button">
mouse-events-example.html

<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mouse-events-example.js"></script>
    <style>
        .my-div {
            width: 290px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>

    <h3>Mouse Events (Enter, Move, Leave)</h3>

    <div class="my-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmousemove="mousemoveHandler(event)">
    </div>

    <h3>Mouse position</h3>
    <div style="color:red;" id="position-div">

    </div>

    <h3>Statistics</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>

</html>

 
mouse-events-example.js


var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;


function mouseleaveHandler(evt) {
    leaveCount += 1;

    showPosition(evt);
    showStatistics();
}

function mouseenterHandler(evt) {
    enterCount += 1;

    showPosition(evt);
    showStatistics();
}

function mousemoveHandler(evt) {
    moveCount += 1;

    showPosition(evt);
    showStatistics();
}




function showPosition(evt) {
    var html = "offsetX: " + evt.offsetX +"<br/>" //
               +
               "offsetY: " + evt.offsetY;

    document.getElementById("position-div").innerHTML = html;
}

function showStatistics() {
    var html =
        "enterCount:" + enterCount + "<br/>" //
        +
        "moveCount:" + moveCount + "<br/>" //
        +
        "leaveCount:" + leaveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 
-
Vous pouvez accéder à l'événement émetteur de l'élément via l'objet event.
event-obj-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(evt)  {
             var target = evt.target;

             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Access 'target' object via 'event' object</h3>

      <button onclick="changeSize(event)">Click Me to Change Size</button>

   </body>
</html>

 
-
Exemple d'un gestionnaire avec plusieurs paramètres.
multi-params-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(borderColor, target, evt, bgColor)  {
             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
             target.style.borderColor = borderColor;
             target.style.backgroundColor = bgColor;
         }
      </script>

   </head>
   <body>

      <h3>A Handler has multiple parameters</h3>
      <a href="">Reset</a> <br/><br/>

      <button onclick="changeSize('red', this, event, 'green')">Click Me</button>

   </body>
</html>

 
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.