Les evenements en js

1. L e s E v è n e m e n t s e n J av a S c r i p T
I- Définition
II- la gestion d’évènements
III- La méthode JavaScript addEventListener()
IV-Evénements de souris
V- La propriété key

2. LES EVENEMENTS EN JAVASCRIPT
I- Définition:
• Les évènements correspondent à des actions effectuées
soit parun utilisateur, soit par le navigateur lui-même (ils
sont des déclencheur de fonction).
• 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.

3. LESEVENEMENTSENJA
V
ASCRIPT
Exemple

4. Le DOM HTML va nous permettre d’assigner des gestionnaires d’évènements
spécifiques à des éléments HTML en utilisant le JavaScript.
LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:

5. 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.
LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:

6. Exercice: On a la page web suivante :
LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:
En cliquant sur Partie 1 et Partie 2
respectivement on aura l’affichage suivant:
En cliquant sur le bouton Masquer
Dans la zone de saisie :
➢ Si on saisie 1 on aura un message
d’alert suivant:
➢ Si on saisie 2 on aura un message
d’alert suivant:
➢ Sinon ;on aura un message d’alert
suivant:

7. Solution:
LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:

8. III-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).
LES EVENEMENTS EN JAVASCRIPT

9. LESEVENEMENTSENJA
V
ASCRIPT
III-La méthode JavaScript addEventListener()
LES EVENEMENTS EN JAVASCRIPT

10. III-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.
LES EVENEMENTS EN JAVASCRIPT

11. III-La méthode JavaScript addEventListener()
• Elle va également nouspermettre de lier plusieurs évènements
différents à un même élément HTML.
LES EVENEMENTS EN JAVASCRIPT

12. III-La méthode JavaScript addEventListener()
• Exercice: réaliser la page web suivante
LES EVENEMENTS EN JAVASCRIPT
Remarque :
Gérer les évènements de la liste déroulante et du bouton en utilisant la méthode addEventListener()

13. III-La méthode JavaScript addEventListener()
• Exercice: la solution
LES EVENEMENTS EN JAVASCRIPT

14. p1.
IV-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
LES EVENEMENTS EN JAVASCRIPT

15. p1.
IV- Evénements de souris
Exemple:
LES EVENEMENTS EN JAVASCRIPT

16. V- La propriété key
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 touche qui 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 :
LES EVENEMENTS EN JAVASCRIPT

17. V- 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
LES EVENEMENTS EN JAVASCRIPT

18. V- La propriété key
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 touchesfléchées
LES EVENEMENTS EN JAVASCRIPT

19. V- La propriété key
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
LES EVENEMENTS EN JAVASCRIPT

20. LESEVENEMENTSENJA
V
ASCRIPT
V- La propriété key
LES EVENEMENTS EN JAVASCRIPT

21. •
Evénement DOM Description
click
Bouton de la souris enfoncé puis relâché sur un
élément.
dblclick Deux foix l'événement click
mouseover Souris au-dessus d'un élément.
mouseout Souris sort d'un élément.
mousedown
Bouton de la souris enfoncé, pas relâché, sur un
élément.
mouseup Bouton de la souris relâché sur un élément.
mousemove Souris en mouvement au-dessus d'un élément.
keydown Touche clavier enfoncée, pas relâchée, sur un élément.
keyup Touche clavier relâchée sur un élément.
keypress Touche clavier enfoncée et relâchée sur un élément.
focus
L'élément reçoit, gagne, le focus. Quand un objet
devient l'élément actif du document.
blur Elément perd le focus.
change Changement de a valeur d'un élément de formulaire.
select Sélection du texte d'un élémen, mis en srubrillance.
submit Envoi d'un formulaire
reset Réinitialisation d'un formulaire
Principaux événements du DOM