Le Tutoriel de Javascript MouseEvent

MouseEvent
Properties & Methods

1. MouseEvent

MouseEvent est une interface qui représente pour les événements se produisant lorsque les utilisateurs interagissent avec des périphériques de pointage (pointing device), tels que la souris, les événements communs tels que click, dbclick, mousedown, mouseup,...

MouseEvent est une sous-interface de UIEvent.

Les types d'événêmnt de MouseEvent :

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 un 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é hors d'un élément.

mousemove	L'événement se produit lorsque le pointeur se déplace au-dessus d'un élément ou de ses enfants.

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.

mousedown, mouseup, click

Commençons par l'événement le plus courant parmi les événements de la souris qui est click (le clic). Il est formé en appuyant (press down) et en relâchant (release). L'événement click est illustré ci-dessous :

dbclick

Si vous click (cliquez) deux fois rapidement, un événement dbclick sera créé.

mouseover vs mouseenter

L'événement mouseenter se produit lors que le curseur se déplace à un élément. L'événement mouseover se produit lorsque le curseur se déplace à un élément ou un de ses éléments enfant.

mouseleave vs mouseout

L'élément mouseleave se produit lorsque le curseur déplace hors d'un élément. L'événement mouseout se produit lorsque le curseur déplace hors d'un élément ou un de ses éléments enfant.

L'exemple ci-dessous vous permet de comparer mouseenter vs mouseover, mouseleave vs mouseout :

enter-vs-over-leave-vs-out.html

<!DOCTYPE html>
<html>

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

    <script src="enter-vs-over-leave-vs-out.js"></script>
    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
        }
        #target-div > div  {
            width: 50px;
            height: 80px;
            margin: 40px 0 0 40px;
            padding: 5px 0 0 5px;
            float: left;
            background: yellow;
        }
    </style>
</head>

<body>

    <h3>mouseenter vs mouseover</h3>
    <h3>mouseleave vs mouseout</h3>

    <div id="target-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseover="mouseoverHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmouseout="mouseoutHandler(event)"
               >
            <div>Child</div>
            <div>Child</div>
            <div>Child</div>
    </div>
    <h3>Statistics:</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>
</html>

enter-vs-over-leave-vs-out.js

var enterCount = 0;
var overCount = 0;

var leaveCount = 0;
var outCount = 0;


function mouseenterHandler(evt) {
    enterCount += 1;
    showStatistics();
}

function mouseoverHandler(evt) {
    overCount += 1;

    showStatistics();
}


function mouseleaveHandler(evt) {
    leaveCount += 1;
    
    showStatistics();
}

function mouseoutHandler(evt) {
    outCount += 1;

    showStatistics();
}


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

mousemove

mousemove-example.html

<!DOCTYPE html>
<html>

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

    <script src="mousemove-example.js"></script>
    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
            margin-bottom: 50px;
        }
        #target-div > div  {
            width: 50px;
            height: 150px;
            margin: 40px 0 0 40px;
            padding: 5px 0 0 5px;
            float: left;
            background: yellow;
        }
    </style>
</head>

<body>

    <h3>mousemove example</h3>

    <div id="target-div" onmousemove="mousemoveHandler(event)">

            <div>Child</div>
            <div>Child</div>
            <div>Child</div>

    </div>

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

    </div>

</body>
</html>

mousemove-example.js

var moveCount = 0;


function mousemoveHandler(evt) {
    moveCount += 1;
    showStatistics();
}


function showStatistics() {
    var html = "moveCount:" + moveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

2. Properties & Methods

MouseEvent est la sous interface de UIEvent, donc elle hérite toutes les propriétés (property) et les méthodes de cette interface.

Javascript UiEvent

key

Propriété	Description
altKey	Renvoie true si la touche "ALT" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false.
ctrlKey	Renvoie true si la touche "CTRL" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false.
shiftKey	Renvoie true si la touche "SHIFT" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false.
metaKey	Renvoie true si la touche "META" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false.

Exemple de la propriété ctrlKey :

prop-ctrlKey-example.html

<!DOCTYPE html>
<html>

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

    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
            margin-bottom: 10px;
        }
    </style>
    
    <script>
      function clickHandler(evt) {
        var html = "evt.ctrlKey=" + evt.ctrlKey;

        document.getElementById("log-div").innerHTML = html;
      }
    </script>
</head>

<body>

    <h3>Press Ctrl key and Click</h3>

    <div id="target-div" onclick="clickHandler(event)" >

    </div>

    <div style="color:red;" id="log-div">

    </div>

</body>
</html>

Position:

Propriété	Description
clientX	Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante.
clientY	Renvoie la coordonnée verticale du pointeur de la souris par rapport à la fenêtre courante.

offsetX	Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la position du bord de l'élément cible.
offsetY	Renvoie la coordonnée verticale du pointeur de la souris par rapport à la position du bord de l'élément cible.

pageX	Renvoie la coordonnée horizontale du pointeur de la souris par rapport au document (page).
pageY	Renvoie la coordonnée verticale du pointeur de la souris par rapport au document (page).

screenX	Renvoie la coordonnée horizontale du pointeur de la souris, relative à l'écran (Ordinateur ou appareil).
screenY	Renvoie la coordonnée verticale du pointeur de la souris, relative à l'écran (Ordinateur ou appareil).

movementX	Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la position du dernier événement mousemove.
movementY	Renvoie la coordonnée verticale du pointeur de la souris par rapport à la position du dernier événement mousemove.

prop-positions-example.html

<!DOCTYPE html>
<html>

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

    <script src="prop-positions-example.js"></script>
    <style>
        #target-div {
            width: 300px;
            height: 210px;
            background: #ccc;
            margin: 0px 0px 10px 20px;
            padding: 5px;
        }
    </style>

</head>

<body style="height:450px; width:1000px;">

    <h3>Positions</h3>

    <div id="target-div" onmousemove="mousemoveHandler(event)" >

    </div>

</body>
</html>

prop-positions-example.js

function mousemoveHandler(evt) {

     var html =  "offsetX = " + evt.offsetX +"<br/>"
               + "offsetY = " + evt.offsetY +"<br/>"
               + "clientX = " + evt.clientX +"<br/>"
               + "clientY = " + evt.clientY +"<br/>"
               + "pageX = " + evt.pageX +"<br/>"
               + "pageY = " + evt.pageY +"<br/>"
               + "screenX = " + evt.screenX +"<br/>"
               + "screenY = " + evt.screenY +"<br/>"
               + "movementX = " + evt.movementX +"<br/>"
               + "movementY = " + evt.movementY;

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

button

Propriété	Description
button	Renvoie un nombre qui décrit quel bouton de la souris a été pressé lorsque l'événement souris a été déclenché.
buttons	Renvoie un nombre qui décrit quel bouton de la souris a été pressé lorsque l'événement souris a été déclenché

which	(N’est pas une propriété standard, ne doit pas être utilisé).

event.button:

0: Bouton principal, généralement le bouton gauche ou l'état non initialisé.
1: Bouton auxiliaire (Auxiliary button), généralement le bouton de la roue ou le bouton du milieu (s'il y en a).
2: Bouton secondaire, généralement le bouton droit.
3: Quatrième bouton, généralement le bouton Browser Back.
4: Cinquième bouton, généralement le bouton Browser Forward.

event.buttons:

0 : Aucun bouton ou non-initialisé.
1 : Bouton principal, généralement le bouton gauche.
2 : Deuxième bouton, généralement le bouton droit.
4 : Bouton auxiliaire (Auxilary button), généralement le bouton de la molette de la souris ou le bouton du milieu.
8 : 4ème bouton, généralement le bouton "Browser Back".
16 : 5ème bouton, généralement le bouton "Browser Forward".

event.buttons peut renvoyer une valeur différente des valeurs ci-dessus. Par exemple, event.boutons renvoie 3 si vous appuyez à la fois sur la souris gauche et la souris droite en même temps.

prop-button-buttons-example.html

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

      <script>
          function mousedownHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.button= " + evt.button +"<br/>"
                             + "event.buttons= "+ evt.buttons;
          }
      </script>

   </head>
   <body>

      <h3>event.button, event.buttons</h3>

      <button onmousedown="mousedownHandler(event)">Click Me!</button>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>
   </body>
</html>

Other properties

Propriété	Description
relatedTarget	Retourne l’élément lié à l’élément qui a déclenché l’événement de la souris

Le Tutoriel de Javascript MouseEvent

1. MouseEvent

2. Properties & Methods

Tutoriels de programmation ECMAScript, Javascript

Tutoriels de programmation ECMAScript, Javascript

Articles les plus récents