JavaScript : les évènements

Notion de programmation événementielle

JS est un langage événementiel : il détecte un évènement et 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 : focus, blur, change, load, mouseover, unload, submit, key, etc.
Pour la détection des évènements on peut utiliser le HTML ou le JavaScript.

Détection des évènements par le HTML

C'est la solution historique mais dépassée car elle présente des inconvénients.

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.

Première solution

Le script est intégré dans le code HTML et appelé via un attribut événementiel de l'élément HTML concerné. ... <body> <button onclick ="var nom =prompt('saisir votre nom'); var message = 'Bonjour mon cher ' + nom ;document.write(message);" >Cliquez ici !</button> </body> ...

Donc l'évènement est détecté par le code HTML grâce à l'ajout d'un attribut événementiel.

onclick : se déclenche lorsque l’utilisateur clique sur un élément ;
onmouseover : se déclenche lorsque l’utilisateur passe le curseur sur un élément ;
onmouseout : se déclenche lorsque l’utilisateur quitte l'élément avec son curseur ;

Le rendu de ce code :

Notez que tous les évènements commencent par le préfixe "on" et que ces attributs, conformément à la syntaxe HTML, doivent être écrits en minuscules.
La valeur de l'attribut événementiel doit être entre guillemets double. Il faut donc utiliser des guillemets simples pour délimiter les chaines. En effet en HTML le caractère d'échappement (antislash) n'est pas autorisé.

Deuxième solution

Il est plus simple de déporter le code JS dans une fonction comme je fais ci-dessous. ... <body> <button onclick ="bonjour()" >Cliquez ici !</button> <script> function bonjour() { var nom =prompt("saisir votre nom"); var message = "bonjour mon cher " + nom ; document.write(message); } </script></body> ...

Le rendu du code amélioré :

Le rendu est strictement identique mais la maintenance du code sera plus facile.
Cependant le code HTML fait encore référence au script ; ce qui est contraire au principe de séparation de la présentation et des traitements.

Détection des évènements par JS

Il y a alors une stricte séparation entre la présentation (en HTML) et le traitement (en JS).
Reprenons le même thème !

solution "onEvent" ; la plus ancienne
solution récente : utiliser la méthode addEventListener (écoute d'évènement) ;
la syntaxe devient alors : élément.addEventListener("évènement", code)

Le code HTML dans les cas

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

Solution "onevent" - script

La syntaxe est : élément.onevent = code document.querySelector('button').onclick = function() { var nom = prompt('tapez votre nom') ; alert("bonjour " + nom );}

Notez l'emploi ici d'une fonction anonyme.
Tous les événements sont préfixés par "on" et sont écrits en minuscules : onclick, onmouseover, onsubmit, onload, etc.
Pour cibler l'élément de la page, privilégiez les méthodes querySelectorAll() & querySelector() qui sont argumentées avec un sélecteur CSS plutôt que les anciennes méthodes telles getElementById(), getElementByName(), etc.

Le rendu de ce code :

L'emploi du gestionnaire d'évènements JS offre un autre avantage : possibilité d'utiliser l'objet event que nous évoquerons bientôt.

Deuxième solution : méthode addEventListener() -script

La syntaxe est alors : élément.addEventListener('évènement',fonction) document.querySelector('button').addEventListener('click',bonjour); function bonjour(event) { var nom = prompt('tapez votre nom') ; document.write("bonjour " + nom ); console.log(event.type); console.log(event.currentTarget); }

Les instructions qui s'affichent dans la console du navigateur sont provisoires.

Le rendu de ce code :

La console précise le type d'évènement et l'élément de la page concerné.

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

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 une syntaxe un peu plus lourde mais offre un gros avantage : 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.

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'>
	<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>
<ul>Liste des tâches à effectuer : 
	<li>appuyez sur une touche du clavier (touches de direction)
	<li>cliquez sur le bouton de commande
	<li>survolez l'image 
	<li>cliquez sur l'image
</ul>
<button>Cliquez ici ! </button>
<img src ="../images/toucan.jpg" class ="centre" id ="toucan">

Le code HTML est débarassé des attributs événementiels.

Le code JS

Le code JS est centralisé en un seul 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 event "event", "e" dans la deuxième fonction, "evt" dans la troisième fonction et "evenement" dans la quatrième.
La quatrième fonction permet de modifier l'aspect de l'image.

Le rendu

Le rendu dans un nouvel onglet

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.

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

Détection des évènements par le HTML

Thématique

Première solution

Deuxième solution

Détection des évènements par JS

Le code HTML dans les cas

Solution "onevent" - script

Deuxième solution : méthode addEventListener() -script

Méthode addEventListener - autre exemple

Les évènements focus et blur

Exemple

Le rendu

L'objet "Event"

Exemple

Le code HTML

Le code JS

Le rendu

Programmation du clavier

Exemple

La feuille de style

Le code HTML

Le script (extraits)

Le rendu