JavaScript : les événements

Notion de programmation événementielle

JS est un langage événementiel : il détecte un événement qui survient 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 bien d'autres. Voir liste ci-dessous.

Détection des événements par HTML

En d'autres termes on utilise les attributs événementiels du HTML.

Exemple

Ci-dessous rendu d'un document HTML dans un Iframe

Suivez les instructions !

Le code correspondant

Le code de la partie BODY

...
<h3>Un règime trop efficace ...</h3>
	<img src ="../images/femme_grosse.jpg" id ="image" 
		onmouseover = "f1()" onclick = "f2()"  	ondblclick ="f3()" onmouseout ="f4()" >
		
	<h3><i>Successivement : 
	<br>survolez l'image
	<br>cliquez sur l'image
	<br>double-cliquez sur l'image
	<br>déplacez le curseur en dehors de l'image</i>
	</h3>
...

Notez les attributs événementiels pour l'élément IMG : onmouseover, onclick, ... etc.

Le script

	function f1() {image.src ='../images/femme_normale.jpg' ; }
	function f2() {image.src ='../images/femme_maigre.jpg' ; }
	function f3() {image.src ='../images/squelette.jpg' ; }
	function f4() {image.src ='../images/femme_grosse.jpg' ; }

Bilan

La détection des événements par le HTML est une solution ancienne, toujours comprise par les navigateurs mais à éviter. En effet le mélange de code HTML et JS dans la partie BODY complique la lisibilité du code donc sa maintenance.

Détection des évéments via le JavaScript

Ci-dessous un document HTML dans un Iframe

Suivez les instructions !

Le code de ce document HTML

Le code de la partie BODY

...
<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; box-shadow : 10px 10px 10px gray; ">
	</div>
	<h3>Ci-dessus une boite ombrée avec une image de fond.
	<br><i>Successivement : 
	<br>Survolez cette boite avec la souris
	<br>Cliquez dans la boite
	<br>Double-cliquez dans la boite
	<br>Déplacer la souris en dehors de la boite
	<br>Enfoncez une touche du clavier et restez appuyé
	<br>Relachez la touche
	<br>Actualisez la page</i>
	</h3>
</body>
...

Plus aucune "scorie" JS dans la code de la partie BODY ; uniquement du HTML !

Le script (contenu du conteneur 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 )' ; }

Les événements sont détectés par le JS selon la méthode "onEvent" ; méthode intitulée ainsi car tous les événements sont préfixés par "on".
Notez que les événements keydown, keypress & keyup sont relatifs à l'objet document.

Détection des événements : solution moderne

Il existe désormais une solution plus moderne pour détecter les événements : 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 bienvenue.
Nous allons traiter ce thème avec les méthodes JS onEvent puis addEventListener".

Le code de la partie BODY dans les deux cas

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

Le script selon la méthode "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 script selon la méthode "addEventListener"

Le script est un peu plus lourd mais retourne beaucoup 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('<br>' + event.type); document.write('<br>' + event.currentTarget); }

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 entre quotes et non préfixé. Par exemple "click" (et non pas "onclick")
nom de la fonction appelée (non suivie de parenthèse)

Le rendu de ce dernier script

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

Méthode addEventListener - un 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.

Exemple de code

...
	<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

Nous allons évoquer maintenant deux évéments liés aux zones de saisie d'un formulaire.
focus : sélection d'un champ.
blur : fin de sélection du champ.

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".

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 du document

...
<h2>L'objet Event et ses propriétés</h2>
<ul>Liste des tâches à effectuer successivement : 
	<li>appuyez sur une touche du clavier (touche directionnelle)
	<li>cliquez sur le bouton de commande
	<li>survolez l'image 
	<li>cliquez sur l'image
</ul>

<button>Cliquez ici ! </button>
<br><img src ="../images/toucan.jpg" width ="30%" id ="toucan">
<h3 id ="info">Les infos sur l'événement vont s'afficher ici !</h3>
...

Le script de la page web

var info = document.getElementById('info') ; 
	
document.onkeydown = function(event) 
{	
	var chaine = "code ASCII de la touche : " + event.keyCode; 
	chaine+= "<br>type évènement : " + event.type ; 
	chaine+= "<br>cible évènement : " + event.target ; 
	info.innerHTML = chaine; 
}
	
document.querySelector('button').onclick = function(evt) 
{
	var chaine = "type évènement : " + evt.type ; 
	chaine+= "<br>cible évènement : "+ evt.target;
	info.innerHTML = chaine; 		
}
		
document.querySelector('img').onmouseover = function(e) 
{
	var chaine = "type évènement : " + e.type  ; 
	chaine+= "<br>cible évènement : " + e.target;
	chaine+= "<br>ID : " + e.target.id; 
	info.innerHTML = chaine; 
}
document.querySelector('img').onclick = function(evenement) 
{ 
	evenement.target.style.border ="5px solid gold"; 
	evenement.target.style.boxShadow ="10px 10px 5px gray"; 
}

Notez comment je produis du texte qui deviend ensuite le contenu de l'élémment H3.

Dans la première fonction j'ai nommé l' objet de type event "event", "e" dans la deuxième fonction ; "evt" dans la troisième fonction ; "evenement" dans la quatrième fonction.
La quatrième fonction permet de modifier l'aspect de l'image alors que les trois précédentes se contentent de donner des informations sur l'événement.

Le rendu dans un Iframe

Si je clique sur l'image, je modifie son aspect : bordure et ombrage !
Notez 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.

Traduction

Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework jQuery.js

Framework Vue.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : les événements

Notion de programmation événementielle

Détection des événements par HTML

Exemple

Ci-dessous rendu d'un document HTML dans un Iframe

Le code correspondant

Le code de la partie BODY

Le script

Bilan

Détection des évéments via le JavaScript

Ci-dessous un document HTML dans un Iframe

Le code de ce document HTML

Le code de la partie BODY

Le script (contenu du conteneur SCRIPT)

Détection des événements : solution moderne

Thématique

Le code de la partie BODY dans les deux cas

Le script selon la méthode "onEvent"

Le script selon la méthode "addEventListener"

Le rendu de ce dernier script

Méthode addEventListener - un autre exemple

Exemple de code

Le rendu de ce code

Les événements focus et blur

Exemple

Le rendu

L'objet "Event"

Exemple

Le code HTML du document

Le script de la page web

Le rendu dans un Iframe

Programmation du clavier

Exemple

La feuille de style

Le code HTML

Le script (extraits)

Le rendu