Les évènement en javascript

1. Les Evènements
en JavaScripT

2. LESEVENEMENTSENJA
VASCRIPT
• Les évènements correspondent à des actions effectuées
soit parun utilisateur, soit par le navigateur lui-même.
• Par exemple, lorsqu’un utilisateur clique sur un bouton
HTML ou lorsque le navigateur va finir de charger une
page web, on va parler d’événement.
• Parfois, on va vouloir «attacher »une action spécifique à
un évènement, comme par exemple modifier la taille des
textes surune page lorsque l’utilisateur clique sur un
bouton.

3. LESEVENEMENTSENJA
V
ASCRIPT
Exemple

4. LESEVENEMENTSENJA
VASCRIPT
Le DOM HTML va nous permettre d’assigner des gestionnaires d’évènements
spécifiques à des éléments HTML en utilisant le JavaScript.

5. LESEVENEMENTSENJA
VASCRIPT
L’utilisation du mot clef " this " dans la gestion d’évènements
Dans le contexte de la gestion d’événements, this va faire référence à
l’objet (représentant l’élément HTML) qui est le sujet de l’événement.

6. LESEVENEMENTSENJA
VASCRIPT
La méthode JavaScript addEventListener()
• La méthode addEventListener() va nous permettre de lier du code à
un évènement. On parlera alorsde gestionnaire d’évènements.
• Le code sera alors exécuté dès le déclenchement de l’évènement.
• Cette méthode appartient à l’objet Element et va avoir besoin de
deux argumentspourfonctionner :
Le nom de l’évènement déclencheur de l'action et
Le code relatif à l’action à effectuer.
• Les événements vont une nouvelle fois avoir des noms similaires aux
attributs HTML mais ne vont plus être précédés du «on »(par exemple,
onclick devient click).

7. LESEVENEMENTSENJA
V
ASCRIPT
La méthode JavaScript addEventListener()

8. LESEVENEMENTSENJA
VASCRIPT
La méthode JavaScript addEventListener()
• L’un des grands avantages de la méthode addEventListener() est de
pouvoir lier plusieurs gestionnaires d’évènements de même type sur un
élément HTML.
42

9. LESEVENEMENTSENJA
VASCRIPT
La méthode JavaScript addEventListener()
• Elle va également nouspermettre de lier plusieurs évènements
différents à un même élément HTML.

10. LESEVENEMENTSENJA
VASCRIPT
p1.
Evénements de souris
En JavaScript, il existe plusieurs événements de souris que vous pouvez écouter pour interagir avec
l'utilisateur. Voici quelques-uns des événements de souris les plus couramment utilisés :
1.click : Cet événement se déclenche lorsqu'un élément est cliqué avec le bouton gauche de la souris.
2.dblclick : Cet événement se déclenche lorsqu'un élément est double-cliqué avec le bouton gauche de la
souris.
3.mousedown : Cet événement se déclenche lorsque le bouton de la souris est enfoncé sur un élément.
4.mouseup : Cet événement se déclenche lorsque le bouton de la souris est relâché sur un élément.
5.mousemove : Cet événement se déclenche lorsqu'un élément est survolé par la souris.
6.mouseover : Cet événement se déclenche lorsqu'un élément est survolé par la souris.
7.mouseout : Cet événement se déclenche lorsque la souris quitte la zone d'un élément.
8.contextmenu : Cet événement se déclenche lorsqu'un élément est cliqué avec le bouton droit de la souris

11. LESEVENEMENTSENJA
VASCRIPT
p1.
Evénements de souris
Exemple:

12. LESEVENEMENTSENJA
VASCRIPT
L’objet Event
L'objet eventen JavaScriptcontient plusieurs propriétés qui permettentd'accéder
aux informations de l'événement en cours, notammentla propriété key. La propriété
key permet de récupérer la touchequi a été pressée lors d'un événement de frappe
(keydown ou keyup).
Voici les différentes valeurs possibles pour la propriété key :
1-Lettresetchiffres
Les touches de lettres et de chiffres ont la même valeur que leur représentation en
caractère. Par exemple : a, b, c, ..., z 0, 1, 2, ..., 9

13. LESEVENEMENTSENJA
VASCRIPT
L’objet Event
2-Touchesspéciales
Certaines touches spéciales ont des valeurs spécifiques pour la propriété key. Voici
quelques exemples :
Enter:la touche Entrée
Backspace:la touche Retour arrière
Escape:la touche Échap
Tab:la toucheTabulation
Shift:la touche Maj
Control:la touche Ctrl
Alt:la toucheAlt
ArrowUp,ArrowDown,ArrowLeft,ArrowRight:les touches fléchées

14. LESEVENEMENTSENJA
VASCRIPT
L’objet Event
3-Touchesfonction
Les touches de fonction (F1 à F12) ont également des valeurs spécifiques pour la
propriété key. Par exemple : F1, F2, F3, ..., F12
4-Autrestouches
Enfin, certaines touches n'ont pas de valeur spécifique pour la propriété key et sont
représentées par leur nom en anglais. Par exemple :
CapsLock:la touche Verr Maj
PrintScreen:la touche Impr écran
Insert:la touche Inser
Delete:la toucheSuppr

15. LESEVENEMENTSENJA
V
ASCRIPT
L’objet Event

16. LESEVENEMENTSENJA
V
ASCRIPT
Exercice:
Réaliser la page ci-dessous sachant qu’on n’appuyant sur la touche Entrer de clavier le
Total sera calculé: