JavaScript : les événements

Notion de programmation événementielle

JS est un langage événementiel : il détecte un événement qui survient dans la page et lance un traitement.

Un événement est quelque chose qui se produit dans le navigateur ou encore une action de l'utilisateur.

Le clic (click en anglais) est l'événement le plus courant mais il y a d'autres ...

Exemple sur les principaux événments

Pour la détection des événements on peut utiliser le gestionnaire HTML ou le gestionnaire JS.
Ci-dessous un document HTML contenant une boite remplie de jaune.

Suivez les consignes indiquées dans cette page web.

À chaque événement sur la page ou sur la boite ou sur une touche l'image de fond de la boite change.

Le code HTML de ce document

...
<body id ='page'>
	<h3>Changement de l'image de fond sur différents événements</h3>
	<div  id ="boite" style ="background : pink;  background-size : cover ; width : 400px ; height : 400px ;
		margin : 10px auto; ">
	</div>
	<h3>Ci-dessus une boite avec une image de fond.
	<br>Successivement : 
	<br><i>Survolez cette boite avec la souris
	<br>Cliquez dans la boite
	<br>Double-cliquez dans la boite
	<br>Déplacer le curseur en dehors de la boite
	<br>Enfoncez une touche du clavier et restez appuyé
	<br>Relachez la touche
	<br>Actualisez la page</i>
	</h3>
...

Notez que les balises BODY & DIV ont chacun un ID.
Aucune 'scorie' de JS dans la partie HTML car j'utilise le gestionnaire JS des événements.

Le script

var page = document.getElementById('page') ;
var boite = document.getElementById('boite') ; 

page.onload = 
	function() {boite.style.backgroundImage ='url(../images/burkini.jpg )' ; }
boite.onmouseover = 
	function() {boite.style.backgroundImage ='url(../images/bikini2.jpg )' ; }
boite.onclick = 
	function() {boite.style.backgroundImage = 'url(../images/seins_nus.jpg )' ; }
boite.ondblclick = 
	function() {boite.style.backgroundImage = 'url(../images/jolie_fille.jpg )' ; }
boite.onmouseout = 
	function() {boite.style.backgroundImage ='url(../images/squelette.jpg )' ; }
document.onkeydown = 
	function() {boite.style.backgroundImage ='url(../images/brune_nue.jpg )' ; }
document.onkeyup = 
	function() {boite.style.backgroundImage  = 'url(../images/black_nue.jpg )' ; }

Attention les événements keydown, keypress & keyup sont relatifs à l'objet document.

Et si j'avais utilisé le gestionnaire HTML des événements ?

Le code HTML deviendrait plus lourd ...
Code HTML & script : ... <body id='page' onload ="f1()" onkeydown ="f6()" onkeyup ="f7()"> ... <div id ='boite' style ="background :yellow ; width : 60% ; height : 200px ; margin : 100px auto;" onmouseenter ="f2()" onclick ="f3()" ondblclick ="f4()" onmouseleave ="f5()" > </div> ... <script> function f1() {boite.style.backgroundImage =... }; function f2() {...} function f3() {...} function f4() {...} function f5() {...} function f6() {...} function f7() {... } ...

Les éléments HTML sont surchargés par les attributs évènementiels ; la lisibilité du code s'en ressent.
Il n'est plus possible d'utiliser la syntaxe simplifiée des fonctions non nommées dans le script.

Conclusion

Privilégiez le gestionnaire JS d'événements au gestionnaire HTML.
Cependant ne soyez pas dogmatique, le gestionnaire HTML rest parfois pratique ...

Détection des événements par le JS - deux solutions

Dans l'exemple précédent j'ai utilisé le gestionnaire JS d'événements mais selon la méthode traditionnelle dite "onEvent" (tous les événements sont préfixés "on").
Il y a cependant une solution plus récente : la méthode addEventListener (écoute d'événement)

Thématique

Suite à un clic sur un bouton de commande le visiteur peut saisir son nom et en retour il y a affichage d'un message de bienvenu.
Nous allons traiter ce thème avec les méthodes "onEvent" & addEventListener" du gestionnaire JS d'événements.

Le code HTML dans les deux cas

Le code HTML est complètement débarassé de "scories" JS et se résume à : ... <body> <button>Cliquez ici !</button> ...

Le script

Voyons d'abord le script avec la solution "onEvent".

Le script "onEvent"

document.querySelector('button').onclick = function()
		 { 
		 var nom = prompt('tapez votre nom') ; 
		 document.write("bonjour " + nom );
		 }

Tous les événements sont préfixés par "on" : onclick, onmouseover, onsubmit, onload, etc.

Le rendu :

Désormais il y a une stricte séparation entre la présentation (le code HTML) et le traitement (le code JS).

Solution : méthode addEventListener()

Le script est un peu plus lourd mais retourne plus d'informations grâce au passage d'un argument : un objet de type "event".

document.querySelector('button').addEventListener('click',bonjour); 
function bonjour(event)
{
	var nom = prompt('tapez votre nom') ; 
	document.write("bonjour " + nom ); 
	document.write('
' + event.type); 
	document.write('
' + event.currentTarget); 
}

Le rendu de ce code :

Les affichages précisent le type d'événement et l'élément de la page concerné.

Apport de la méthode addEventListener()

La méthode addEventListener ajoute au gestionnaire d'événement l'écoute de l'événement d'où de terme "listener".

le nom de l'événement. Par exemple "click" (et non pas "onclick")
nom de la fonction appelée

Gros avantage de cette méthode : un objet de type "Event" peut être passé en argument de la fonction.

Méthode addEventListener : autre exemple

L'emploi de la méthode addEventListener donne la possibilité d'associer sur un même élément et pour le même événement plusieurs fonctions. ... <button>Cliquez ici !</button> <script> var nom, prenom; var bouton = document.querySelector('button'); bouton.addEventListener('click',function() {nom = prompt('tapez votre nom') ;prenom = prompt('tapez votre prénom') }); bouton.addEventListener('click',function() {document.write("bonjour " + nom + " prénomé " + prenom )}); </script> ...

On associe au bouton de commande deux fonctions : une pour la saisie de variables et une autre pour l'affichage des variables.
Ces deux fonctions sont liées au même élément sur le même événement : clic sur le bouton de commande.

Le rendu de ce code :

Les événements focus et blur

Ce sont des événements très utilisés dans les formulaires avec les champs de saisie.

Exemple

...
<body>
<form>
	<label>Note ? </label><input type = 'text'>
	<br><label>Libellé</label><input type = 'text'>
</form>
<script>
document.querySelector('input').onfocus = 
		function() {this.value ='le séparateur décimal est le point !' ; }
document.querySelector('input').onblur = 
		function() {if(isNaN(this.value)) alert('erreur de saisie') ; 
	else alert('saisie correcte');   }
</script>
...

Grâce à ce script il y a un contrôle de saisie sur le premier input du formulaire.

Nous voyons une bonne illustration de deux événements liés aux champs de formulaire : focus et blur.
Ici un message ('le séparateur décimal ...) s'affiche dès que le curseur pointe le premier input (onfocus). Dès que cette zone de saisie n'est plus pointée (onblur) un test est effectué pour afficher un second message "erreur de saisie" ou "saisie correcte".
Notez l'emploi du mot this qui est très pratique et qui fait référence à l'objet en cours d'utilisation ; ici le premier input.
Donc le mot this remplace ici document.querySelector('input').

Le rendu

L'objet "Event"

Un objet "event" peut être passé à la fonction de traitement liée à la détection d'un événement.

type : click ou mouseover (survol par la souris) ou keydown (appui sur une touche) etc.
keyCode : code ASCII de la touche du clavier enfoncée
target : cible de l'événement c'est à dire l'objet concerné par l'événement

Exemple

Le code HTML

...
<h2>L'objet Event et ses propriétés</h2>
<p>En utilisant comme argument de la fonction un objet de type "event" on peut obtenir de 
précieuses informations. 

<h3>Exemple</h3>
<ul>Dans cet exemple on obtient des infos : 
<li>sur le clavier
<li>sur le bouton de commande
<li>sur l'image de la page
</ul>
Et on peut modifier l'aspect de l'image. 

<h4>Le code HTML</h4>
<textarea readonly>
...
<body>
<ul>Liste des tâches à effectuer : 
	<li>appuyez sur une touche de direction du clavier
	<li>cliquez sur le bouton de commande
	<li>survolez l'image 
	<li>cliquez sur l'image
</ul>
<button>Cliquez ici ! </button>
<h3>Affichez la console du navigateur ! </h3>
<img src ="../images/toucan.jpg" class ="centre" id ="toucan">

Le script

...
	document.onkeydown = function(event) 
	{	// si appui sur une touche du clavier
		console.log("code ASCII de la touche : " + event.keyCode) ; 
		console.log("type événement : " + event.type) ; 
		console.log("cible événement : " + event.target) ; 
	}
	
	document.querySelector('button').onclick = function(evt) 
		{console.log("type événement : " + evt.type) ; 
		console.log("cible événement : "+ evt.target);  
		}
		
	document.querySelector('img').onmouseover = function(e) 
		{console.log("type événement : " + e.type) ; 
		console.log("cible événement : " + e.target);
		console.log("ID : " + e.target.id); 
		}
	document.querySelector('img').onclick = function(evenement) 
		{ 
		evenement.target.style.border ="5px solid gold"; 
		evenement.target.style.boxShadow ="10px 10px 5px gray"; 
		}
...

Dans la première fonction j'ai nommé l' objet de type event "event", "e" ; dans la deuxième fonction, "evt" et dans la troisième fonction "e" et "evenement" dans la quatrième fonction.
La quatrième fonction permet de modifier l'aspect de l'image.

Ce document affiché dans un Iframe

Affichez la console !

Si je clique sur l'image, je modifie son aspect : bordure et ombrage !
Remarquez que les touches de direction du clavier ont un code ASCII compris entre 37 et 40 inclus.

Programmation du clavier

A l'occasion de l'exemple précédent, vous avez pu noté que le code ASCII des touches directionnelles est compris entre 37 et 40.

Théme : grâce aux touches directionnelles, vous devez déplacer la boule du billard.

Exemple

La feuille de style

#billard {position : relative ; width : 80% ; height :200px ; 
		margin : 10px auto ; background : lime ;  }
#boule {width : 20px ; height : 20px ; border-radius : 10px ; 
		box-shadow : 5px 5px 5px gray ; 
		position : absolute ; top : 90px ; left : 50% ; background : red ; }

Le code HTML

Il est d'une simplificité déroutante ... <div id = "billard"> <div id ="boule"></div> </div>

Une boîte identifiée billard contient une boule. C'est cet élément qu'il faut déplacer avec le clavier.

Pour dessiner un rond il faut appliquer la propriété de style border-radius à une boîte carrée !

Le script (extraits)

Deux fonctions affichées sur quatre.

var billard = document.querySelector('#billard'); 	// variables objet 
var boule = document.querySelector('#boule'); 
var x; var y ; 
	
// programmation des touches de direction
document.onkeydown = function(event)
{	
		if (event.keyCode == 37)  gauche(); 
		if (event.keyCode == 39) droite() ; 
		if (event.keyCode == 38) haut();  
		if (event.keyCode == 40) bas() ; 
} // fin fonction 
	
// quatre fonctions de déplacement
function gauche() 
{
		x = getComputedStyle(boule).left; 
		x = parseInt(x); x= x-20;  
		x = x + "px";
		boule.style.left = x ; 
} 
...
function haut() {y = getComputedStyle(boule).top; 
		y = parseInt(y); y= y-20;  y = y+"px"; boule.style.top = y ; }
...

Les quatre touches du pavé directionnel sont programmées. Si appui sur l'une de ces touches appel d'un des quatre fonctions.
Deux fonctions pour changer la valeur de la propriété left de l'objet boule et deux fonctions pour augmenter ou diminuer la valeur de la propriété top.
La méthode getComputedStyle avec la propriété top/left retourne une chaîne telle "90px". Il faut donc convertir en entier puis incrémenter (ou décrémenter) puis rajouter "px". Bref c'est un peu lourd.

Le rendu

Le rendu dans un nouvel onglet

La boule peut sortir du billard. Mais ça ne serait pas très compliqué d'éviter cela. Il suffirait d'un test.

Les événements tactiles

Les événements tactiles ne sont déclenchés que sur les périphériques tactiles, comme les smartphones ou les tablettes. Les événements de la souris souris comme click, mousemove sont déclenchés aussi sur les terminaux tactiles. Cependant, pour la plupart des smartphones, l'événement mouseover (survol de la souris) n'est pas déclenché, car il n'existe pas de moyen de survoler un écran sans le toucher.

Dans la plupart des cas et dans le script il suffit d'écouter les événements de la souris car ils sont universels.
Cependant sachez qu'il existe des événements spécifiques aux écrans tactiles comme je le montre dans ce paragraphe.

Ci-dessous un document HTML

Utilisez votre tablette !

Sachez cependant qu'il est possible de simuler le fonctionnement d'une tablette à partir de votre ordinateur donc de tester les événements dits touchEvent.

Procédure pour basculer en mode "écran tactile" sur votre PC :

Sur votre ordinateur et avec le navigateur Chrome il suffit d'afficher la console et de cliquer sur l'icône "Afficher / Désactiver barre d'outils de l'appareil".
Un rond grisé apparait, il simule un doigt.
La capture d'écran ci-dessous vous indique où cliquer pour basculer en "mode tablette".

Sous Firefox, on peut activer la simulation "écran tactile" en cliquant sur "vue adaptative" dans la console. Il peut être nécessaire de recharger la page ...

Le code de ce document

'
...
<canvas id="canevas" width="600" height="300" style="border:1px solid black; width : 60% ; background : lime; ">
</canvas>
<p>Avec un doigt, appuyez, déplacez, relachez !
<p id ="infos" ></p>

<script>
const message = document.getElementById('infos'); 
const canevas = document.getElementById("canevas");

canevas.addEventListener("touchstart", f1);
canevas.addEventListener("touchend", f2);
canevas.addEventListener("touchcancel", f3);
canevas.addEventListener("touchmove", f4);

canevas.addEventListener("click", f5);
canevas.addEventListener("dblclick", f6);
canevas.addEventListener("mouseover", f7);
canevas.addEventListener("mouseout", f8);

function f1(){message.innerHTML = "Evt: appui sur écran"; }
function f2(){message.innerHTML = "Evt: relachement appui"; }
function f3(){message.innerHTML = "Evt: annulation"; }
function f4(){message.innerHTML = "Evt: déplacement doigt"; }

function f5(){message.innerHTML = "Evt: clic dans canevas"; }
function f6(){message.innerHTML = "Evt: dble clic dans canevas"; }
function f7(){message.innerHTML = "Evt: survol du canevas"; }
function f8(){message.innerHTML = "Evt: fin survol du canevas"; }
...

Gestion de quatre événements spécifiques aux écrans tactiles : événements dits "toucheEvent".

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : les événements

Notion de programmation événementielle

Exemple sur les principaux événments

Le code HTML de ce document

Le script

Et si j'avais utilisé le gestionnaire HTML des événements ?

Conclusion

Détection des événements par le JS - deux solutions

Thématique

Le code HTML dans les deux cas

Le script

Le script "onEvent"

Solution : méthode addEventListener()

Apport de la méthode addEventListener()

Méthode addEventListener : autre exemple

Les événements focus et blur

Exemple

Le rendu

L'objet "Event"

Exemple

Le code HTML

Le script

Ce document affiché dans un Iframe

Programmation du clavier

Exemple

La feuille de style

Le code HTML

Le script (extraits)

Le rendu

Les événements tactiles

Ci-dessous un document HTML

Le code de ce document