Les événements

Gestion des événements

Une fonction est exécutée lorsque survient un événement sur un noeud. A la lecture des pages précédentes de ce tutoriel vous pouvez penser à juste titre qu'il n'y a qu'un événement : clic (click en anglais).
Et bien non il y a d'autres événements. Citons focus, blur, change, load, mouseover, unload, etc.

Dans le cadre de gestion des événements on peut utiliser (ou pas) l'API DOM.

Prenons un exemple. Nous voulons qu'une fonction JavaScript s'exécute lors d'un clic sur un bouton de commande. La fonction demande votre nom puis l'affiche précédé de "bonjour".

Je vous propose trois solutions pour ce thème. la première sans le DOM, la deuxième avec le DOM-0 et la troisième avec le DOM-2.

Première solution : sans le DOM

... <button onclick ="bonjour()" >Appel fonction</button> <script> function bonjour() { var nom =prompt("saisir votre nom"); var message = "bonjour mon cher " + nom ; alert(message); } </script> ...

Ici on utilise le gestionnaire d'événement de HTML (et non pas le DOM) c'est à dire que l'on utilise les attributs HTML de type évènement.

Inconvénient de cette solution : on retrouve dans une instruction HTML du JavaScript (l'appel de fonction).
Essayez ce code !

Utilisation du DOM-0

... <button>Appel fonction</button> <script> document.querySelector('button').onclick = function() { var nom = prompt('tapez votre nom') ; alert("bonjour " + nom );} </script> ...
Essayez !

On utilise l'API DOM et plus précisément la méthode querySelector de l'objet document.
L'emploi de l'API DOM permet de bien séparer le code HTML du code JS et aussi d'utiliser la technique de la fonction anonyme.

L'emploi du DOM pour gérer les évènements offre aussi un autre avantage : possibilité d'utiliser l'objet event que nous évoquerons bientôt.

Utilisation du DOM-2

Exemple 1

... <button>Appel fonction</button> <script> var bouton = document.querySelector('button'); bouton.addEventListener('click',function() {var nom = prompt('tapez votre nom') ; alert("bonjour " + nom );}); </script> ...
Essayez !

Observez bien le script. Dans le cadre du DOM-2 il faut utiliser la méthode addEventListener avec trois paramètres:

Dans les trois exemples qui suivent je ne passe que deux arguments lors de l'appel la méthode addEventListener.

DOM-2 : exemple 2

L'emploi du DOM-2 est un peu plus compliqué. Mais il offre un gros avantage : possibilité de pouvoir associer à un même évènement sur le même élément plusieurs fonctions. C'est le cas dans l'exemple ci-dessous.

... <button>Appel fonction</button> <script> var nom,prenom ; // variables globales var bouton = document.querySelector('button'); bouton.addEventListener('click',function() {nom = prompt('tapez votre nom') ;prenom = prompt('tapez votre prénom') }); bouton.addEventListener('click',function() {alert("bonjour " + nom );alert("prénomé " + prenom )}); </script> ...

On associe au bouton de commande deux fonctions : une pour la saisie de variables et une autre pour l'affichage de variables globales.
Essayez !

DOM 2 : exemple 3

La syntaxe parait plus simple lorsque l'on utilise des fonctions personnelles nommées comme l'exemple ci-dessous.

... <button>Appel de N fonctions avec un seul bouton </button> <script> var nom,prenom ; var bouton = document.querySelector('button'); bouton.addEventListener('click',f1) ; bouton.addEventListener('click',f2) ; bouton.addEventListener('click',f3) ; function f1() {nom = prompt('tapez votre nom') ;prenom = prompt('tapez votre prénom') } function f2() {alert("bonjour " + nom + " prénommé " + prenom )} function f3(event) {alert("type évènement : " + event.type + " cible évènement : " + event.target);} </script> ...
Essayez !

addEventListener : à utiliser sans modération

Je pense que vous avez compris l'intérêt de l'emploi de addEventListener.
Supposons que l'on vous demande de rajouter une action sur clic pour un élément. Si vous n'utilisez pas le DOM ou simplement le DOM-0 vous êtes obligé de réécrire toute la fonction JavaScript. Tandis si vous employer le DOM-2 il suffit de rajouter une instruction addEventListener
Pratique, n'est-ce pas ...

Les événements focus et blur

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

Emploi du DOM-0 !

Le code de l'exemple (extrait)

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

Commentaire du code

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').
Essayer !

L'objet "Event"

Lorsque vous cliquez sur un élément ou survolez un élément ou encore lorsque vous appuyez sur un touche du clavier un évènement se produit c'est à dire un changement d'état qui peut être analysé par JavaScript.
Il s'agit de l'objet "event" qui comme tout objet a des propriétés.

Il y a d'autres propriétés mais qui sont moins utiles ...

Exemple

Le code de l'exemple (extrait)

... <body> <button>Cliquez ce bouton de commande et observez ! </button> <img src ="../images/toucan.jpg" height ="200" > <p>Cliquez l'image et observez !</p> <h2>Appuyez sur n'importe quelle touche du clavier et observez ! </h2> <p>En particulier appuyez sur les touches &larr; , &uarr; , &rarr; et &darr; du clavier et notez sur un papier le code ASCII de chacune de ces quatre touches. <br>Ainsi vous comprendrez la programmation du clavier.</p> ... <script> document.onkeydown = function(event) { // si appui sur une touche du clavier alert("code ASCII de la touche : " + event.keyCode) ; alert("type évènement : " + event.type) ; alert("cible évènement : " + event.target) ; } document.querySelector('button').onclick = function(evt) { alert("type évènement : " + evt.type) ; alert("cible évènement : "+ evt.target); } document.querySelector('img').onclick = function(e) { alert("type évènement : " + e.type) ; alert("cible évènement : " + e.target); } </script> ...

Commentaire

Attention la propriété type retourne click (et non pas onclick), mouseover (et non pas onmouseover), keydown (et non pas onkeydown) , etc.

L'évènement est pour JavaScript un objet. Mais c'est au programmeur de trouver un nom à cet objet. Souvent il est nommé event ou encore e ou plus rarement evt.

Dans la première fonction j'ai nommé l' objet évènement event, e dans la deuxième fonction et enfin evt dans la troisième fonction.

Si vous avez suivi les consignes vous avez remarqué que les touches de direction du clavier ont un code ASCII compris entre 37 et 40 inclus.


Testez !
Retour menu