devstory

La gestion des événements en JavaScript

  1. Javascript Events
  2. L'exemple avec des événements

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énement
Description
click
L'événement se produit lorsque l'utilisateur clique (click)sur un élément (element).
contextmenu
L'é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.
dblclick
L'événement se produit lorsque l'utilisateur double-clique (double-clicks) sur un élément.
mousedown
L'événement se produit lorsque l'utilisateur appuie sur un bouton de la souris sur un élément.
mouseup
L'événement se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément.
mouseenter
L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
mouseleave
L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
mousemove
L'événement se produit lorsque le pointeur se déplace alors qu'il est au-dessus d'un élément.
mouseout
L'é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.
mouseover
L'é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énement
Description
submit
Lorsqu'un utilisateur submit (envoyer) le contenu d'un <form>.
focus
Lorsqu'un utilisateur se concentre (focus) à un élément, par exemple <input>.
blur
Lorsqu'un utilisateur quitte un élément, par exemple <input>.
Événements clavier :
Evénement
Description
keydown
L'événement se produit lorsque l'utilisateur appuie sur une touche (key).
keyup
L'événement se produit lorsque l'utilisateur relâche une touche
keypress
L'événement se produit lorsque l'utilisateur appuie (press) sur une touche. (Effectuer 2 actions, appuyer et relâcher).
Des événements Document.
Evénement
Description
DOMContentLoaded
Lorsque 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énement
Description
animationstart
L'événement se produit lorsqu'une animation CSS a démarré.
animationend
L'événement se produit lorsqu'une animation CSS a complété.
animationiteration
L'é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>

Tutoriels de programmation ECMAScript, Javascript

Show More

Tutoriels de programmation ECMAScript, Javascript

Show More