Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JavaScript : les évènements

Une fonction est exécutée lorsque survient un événement sur un élément. 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.

Gestion des évènements

Dans le cadre de gestion des évènements on peut utiliser (ou pas) l'API DOM.
Prenons un exemple. Nous voulons qu'une fonction 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

Donc l'évènement est détecté par le code HTML grâce à l'ajout dans la balise début de l'élément de type "button" d'un attribut "onclick".

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

Utilisation du DOM-0

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 dissocier le code HTML du code JavaScript 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

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.

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.

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.

Essayez !

addEventListener : à utiliser sans modération

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)

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)

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 !

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.

Le code de la page

La feuille de style

Le code HTML

Il est d'une simplificité déroutante ...

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.

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.

Essayez

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