Informatique


Souris et clavier

Aller à

L'objet

Les propriétés et méthodes permettant de récupérer les événement de la souris et du clavier appartiennent à l'objet Event, et plus précisément MouseEvent et keyboardEvent.
MDN ou W3School


Les coordonnées de la souris

On utilise les propriétés clientX et clientY de l'objet MouseEvent.

Si on veut savoir la position de la souris sur l'ensemble du document, on applique le gestionnaire sur document.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		#position {width:180px;height:40px;background:yellow}
	</style>
</head>
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=position></div>
	<script>
	var posi=document.querySelector("#position");
	document.addEventListener("mousemove",function(e){
		posi.innerHTML="Position X: "+e.clientX+" px<br>Position Y: "+e.clientY+" px";
		});
		</script>
</body>

Plutôt que d'écrire document.addEventListener() on aurait pu écrire document.querySelector("html").addEventListener() ou encore document.getElementsByTagName("html")[0].addEventListener().
Noter que pour la dernière solution ci-dessus le [0] est indispensable car le méthode renvoie un tableau, même si un seul résultat est renvoyé!


Le bouton cliqué de la souris

On va détecter le bouton de la souris utilisé, la propriété button de l'objet MouseEvent renvoie un entier: 0, 1 ou 2.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
	
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=util></div>
	<button id=mb>Clic!</button>
	<script>
	var util=document.querySelector("#util");
	var monbouton=document.querySelector("#mb");
	//console.log(monbouton);
	monbouton.addEventListener("mousedown",quelbouton);
	function quelbouton(e){
		if(e.button==0){
			util.innerHTML="Un beau clic gauche...";
		}
		else if(e.button==1){
			util.innerHTML="Un beau clic du milieu...";
		}
		else if(e.button==2){
			util.innerHTML="Un beau clic du droit...";
		}else {
			util.innerHTML="Oups...";
		}
	}
	</script>
</body>

Les touches du clavier

Quelle touche a été pressé?

On va utiliser la propriété key sur l'objet keyboardEvent qui sera keydown, keyup ou keypress.

Démo
    <h1 id=maintitre>Pressons une touche du clavier...</h1>
	<script>
		var d1=document.getElementsByTagName("html")[0];
		d1.addEventListener("keydown",reaction);
		function reaction(e){
			alert(e.key);
		}
	</script>
Tester si ctrl, shift ou alt sont enfoncées?

On va utiliser un événement de la souris et savoir si au moment de l'événement de la souris une des trois touche est enfoncées.
On utilisera les propriétés ctrlKey, shiftKey et altKey.
Ces propriétés renvoient true ou false.

Démo
 <h1 id=maintitre>Cliquons en pressant ou en ne pressant pas la touche alt...</h1>
 <div id=res></div>
 <div id=res1></div>
 <div id=res2></div>
 <script>
 var d1=document.getElementsByTagName("html")[0];
 d1.addEventListener("click",reaction);
 function reaction(e){
	resu=document.querySelectorAll("div");
	resu[0].textContent="La touche alt est pressée: "+e.altKey;
	resu[1].textContent="La touche shift est pressée: "+e.shiftKey;
	resu[2].textContent="La touche ctr est pressée: "+e.ctrlKey;
 }
 </script>