Les Evènements en JavaScripT

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
 LES EVENEMENTS EN JAVASCRIPT
I- Définition:

• Les évènements correspondent à des actions effectuées

soit par un 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.

LES EVENEMENTSENJAVASCRIPT
Exemple
 LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:
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:
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:
Exercice: On a la page web suivante :
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:
 LES EVENEMENTS EN JAVASCRIPT
II-la gestion d’évènements:
Solution:
 LES EVENEMENTS EN JAVASCRIPT
III-La méthode JavaScript addEventListener()

• La méthode addEventListener() va nous permettre de lier du code à

un évènement. On parlera alors de 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 arguments pour fonctionner :

Le nom de l’évènement déclencheur de l'action et

Le code relatif à l’ac tion à 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 EVENEMENTSENJAVASCRIPT
LES EVENEMENTS EN JAVASCRIPT
III-La méthode JavaScript addEventListener()
 LES EVENEMENTS EN JAVASCRIPT
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
III-La méthode JavaScript addEventListener()

• Elle va également nous permettre de lier plusieurs évènements

différents à un même élément HTML.
 LES EVENEMENTS EN JAVASCRIPT
III-La méthode JavaScript addEventListener()

• Exercice: réaliser la page web suivante

Remarque :
Gérer les évènements de la liste déroulante et du bouton en utilisant la méthode addEventListener()
 LES EVENEMENTS EN JAVASCRIPT
III-La méthode JavaScript addEventListener()

• Exercice: la solution
 LES EVENEMENTS EN JAVASCRIPT
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.

p1.
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
IV- Evénements de souris
Exemple:

p1.
 LES EVENEMENTS EN JAVASCRIPT

V- La propriété key
L'objet event en JavaScript contient plusieurs propriétés qui permettent d'accéder aux

informations de l'événement en cours, notamment la 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
V- La propriété key
1- Lettres et chiffres

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
V- La propriété key
2-Touches spé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 touche Tabulation
Shift: la touche Maj
Control: la touche Ctrl
Alt: la touche Alt
ArrowUp, ArrowDown, ArrowLeft, ArrowRight: les touches fléchées
 LES EVENEMENTS EN JAVASCRIPT
V- La propriété key
3- Touches fonction
Les touches de fonction (F1 à F12) ont également des valeurs spécifiques pour la
propriété key. Par exemple : F1, F2, F3, ..., F12

4-Autres touches
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 touche Suppr
 LES EVENEMENTS EN JAVASCRIPT
LES EVENEMENTSENJAVASCRIPT
V- La propriété key
 Principaux événements du DOM

Evénement DOM Description

Bouton de la souris enfoncé puis relâché sur un
click
élément.
dblclick Deux foix l'événement click
mouseover Souris au-dessus d'un élément.
mouseout Souris sort d'un élément.
Bouton de la souris enfoncé, pas relâché, sur un
mousedown
é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.
L'élément reçoit, gagne, le focus. Quand un objet
focus
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