Script mouse : Etude des événements liés à la souris

Affiche les informations et propriétés des événements de souris

Partie II : L'interactivité

Edition 1 | Chapitre 11 : La programmation événementielle / Page 159

Edition 2 | Chapitre 11 : La programmation événementielle / Page 174

Edition 3 | Chapitre 11 : La programmation événementielle / Page 174

<html>
<head><title>Evénements de souris</title><style type="text/css">div#bloc {background-color:#aaa;width:98%;height:250px;margin:5px;} div#info {padding:5px;font-size:15px;border:2px solid #999;min-height:80px;font-family: courier new;}</style>
</head>
<body><h1>Détection des événements de la souris</h1><h3>Déplacez le curseur souris dans le bloc gris</h3><div id="bloc"></div><div id="info"></div>
</body><script type="text/javascript">var bloc=document.getElementById("bloc");var info=document.getElementById("info");
bloc.addEventListener("mouseenter", function(evt) {info.style.borderColor="#0a0";
});
bloc.addEventListener("mouseleave", function(evt) {info.style.borderColor="#999";
});
bloc.addEventListener("mousemove", blocMove);
function blocMove(evt) {var i="Position dans l'écran : (screenX, screenY) = ";i+="("+evt.screenX+", "+evt.screenY+")<br />";i+="Position dans la page : (clientX, clientY) = ";i+="("+evt.clientX+", "+evt.clientY+")<br />";i+="Position dans le bloc : (offsetX, offsetY) = ";i+="("+evt.offsetX+", "+evt.offsetY+")<br />";i+="Déplacement depuis mousemove : (movementX, movementY) = ";i+="("+evt.movementX+", "+evt.movementY+")";info.innerHTML=i;
}bloc.addEventListener("click", blocClick);function blocClick(evt) {console.log(evt);console.log("Un clic a été détecté bouton = "+evt.button);}bloc.addEventListener("dblclick", blocDblClick);function blocDblClick(evt) {console.log("Un double-clic a été détecté bouton = "+evt.button);}bloc.addEventListener("auxclick", blocAuxClick);function blocAuxClick(evt) {console.log("Un clic auxiliaire a été détecté bouton = "+evt.button);}window.addEventListener("mousewheel", mWheel);function mWheel(evt) {console.log(evt);}//console.log(Object.getPrototypeOf(evt).constructor.name);</script>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Evénements de souris</title>    <style type="text/css">        div#bloc {            background-color:#aaa;            width:98%;            height:250px;            margin:5px;        }         div#info {            padding:5px;            font-size:15px;            border:2px solid #999;            min-height:80px;            font-family: courier new;        }    </style></head><body>    <h1>Détection des événements de la souris</h1>    <h3>Déplacez le curseur souris dans le bloc gris</h3>    <div id="bloc"></div>    <div id="info"></div>    </body>    <script type="text/javascript">        var bloc=document.getElementById("bloc");        var info=document.getElementById("info");bloc.addEventListener("mouseenter", function(evt) {  info.style.borderColor="#0a0";});bloc.addEventListener("mouseleave", function(evt) {  info.style.borderColor="#999";});bloc.addEventListener("mousemove", blocMove);function blocMove(evt) {  var i="Position dans l'écran : (screenX, screenY) = ";  i+="("+evt.screenX+", "+evt.screenY+")<br />";  i+="Position dans la page : (clientX, clientY) = ";  i+="("+evt.clientX+", "+evt.clientY+")<br />";  i+="Position dans le bloc : (offsetX, offsetY) = ";  i+="("+evt.offsetX+", "+evt.offsetY+")<br />";  i+="Déplacement depuis mousemove : (movementX, movementY) = ";  i+="("+evt.movementX+", "+evt.movementY+")";  info.innerHTML=i;}        bloc.addEventListener("click", blocClick);        function blocClick(evt) {            console.log(evt);            console.log("Un clic a été détecté bouton = "+evt.button);        }        bloc.addEventListener("dblclick", blocDblClick);        function blocDblClick(evt) {            console.log("Un double-clic a été détecté bouton = "+evt.button);        }        bloc.addEventListener("auxclick", blocAuxClick);        function blocAuxClick(evt) {            console.log("Un clic auxiliaire a été détecté bouton = "+evt.button);        }        window.addEventListener("mousewheel", mWheel);        function mWheel(evt) {            console.log(evt);        }            //console.log(Object.getPrototypeOf(evt).constructor.name);    </script></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...