Web-Programming II:

JavaScript
Events Handling

1
Introduction à la Gestion des
Événements
Les événements sont des actions détectées par le
navigateur, comme un clic de souris, une pression de
touche, etc.
La gestion des événements en JavaScript permet de définir
des réactions à ces actions, comme l’exécution d’une
fonction.
Les événements sont souvent utilisés pour rendre les pages
web interactives et réactives.
Valider un formulaire avant soumission
Montrer/cacher des éléments au clic d’un bouton
Mettre à jour dynamiquement le contenu sans recharger
la page
2
Événements courants en JavaScript
Nom de Description
l’event
click Lorsqu’un utilisateur clique sur un élément
mouseover Lorsque la souris passe sur un élément
mouseout Lorsque la souris quitte un élément
keydown Lorsqu’une touche est enfoncée
keyup Lorsqu’une touche est relâchée
change Lorsqu’une valeur d’un champ change
focus Lorsqu’un champ reçoit le focus
Nom de Description
l’event
blur Lorsqu’un champ perd le focus
scroll Lorsque l’utilisateur fait défiler la page
resize Lorsque la fenêtre du navigateur est
redimensionnée
load Lorsque la page est chargée
submit Lorsqu’un formulaire est soumis
mouseenter Lorsque la souris entre dans un élément
mouseleave Lorsque la souris quitte un élément

3
Ajouter un Event
Il existe trois façons principales pour ajouter un event en
JavaScript.

Event inline : directement dans le code HTML

Propriétés JavaScript : en définissant une propriété comme
onclick
addEventListener() : méthode recommandée pour ajouter
des events

4
1️⃣ Avec un event inline
On peut ajouter un event directement dans le code HTML avec
des attributs comme onclick, onmouseover, etc.
1 <button onclick="alert('Bouton cliqué !')">Clique-moi</button>

5
2️⃣ Avec les propriétés JavaScript
On peut attacher un event en définissant une propriété comme
onclick dans le code JavaScript.
1 <button id="myBtn">Clique-moi</button>
2
3 <script>
4 document.getElementById("myBtn").onclick = function () {
5 alert("Bouton cliqué !");
6 };
7 </script>

Bonne pratique, mais ne permet d’attacher qu’un seul event

par élément.

6
3️⃣ Avec addEventListener()
Un Event Listener est une fonction qui attend un événement
spécifique pour se déclencher.
Syntaxe: element.addEventListener(event, callback)
la fonction callback est exécutée lorsque l’événement se
produit.

Cette méthode permet d’ajouter plusieurs evenements (event

handlers ) sur le même element.

7
3️⃣ Avec addEventListener() (suite)
1 <button id="myBtn">Clique-moi</button>
2
3 <script>
4 document.getElementById("myBtn").addEventListener("click", function () {
5 alert("Bouton cliqué !");
6 });
7 </script>

Pratique recommandée permettant d’ajouter plusieurs event

handlers sur le même élément.

8
Pourquoi préférer
addEventListener() ?
La méthode addEventListener() offre plusieurs avantages par
rapport aux propriétés comme onclick :

Plusieurs handlers : On peut ajouter plusieurs fonctions pour

le même event.
Contrôle total : On peut supprimer un event avec
removeEventListener().
Meilleure séparation : Le JavaScript est séparé du HTML.

9
onclick vs
addEventListener("click")
1 <button id="btn">Clique-moi</button>
2
3 <script>
4 let btn = document.getElementById("btn");
5
6 // Premier event handler
7 btn.onclick = function () {
8 alert("Premier event !");
9 };
10
11 // Deuxième event handler remplace le premier
12 btn.onclick = function () {
13 alert("Deuxième event !");
14 };
15 </script>

le deuxième onclick remplace complètement le premier. Seul

“Deuxième event !” est affiché. 10
onclick vs addEventListener() (suite)
Avec addEventListener(), on peut ajouter plusieurs handlers
sans les écraser.
1 <button id="btn">Clique-moi</button>
2
3 <script>
4 let btn = document.getElementById("btn");
5
6 // Premier event handler
7 btn.addEventListener("click", function () {
8 alert("Premier event !");
9 });
10
11 // Deuxième event handler
12 btn.addEventListener("click", function () {
13 alert("Deuxième event !");
14 });
15 </script>
Les deux alertes s’affichent dans l’ordre. addEventListener()
permet d’ajouter plusieurs handlers.

11
L’objet event
Chaque event possède un objet event, qui permet d’accéder
à des informations sur l’événement.
L’objet event est passé automatiquement à la fonction
callback de l’event listener.
event.target : L’élément qui a déclenché l’event
event.type : Le type de l’event (ex: “click”, “keydown”)

12
L’Objet event (Suite)
1 <button id="myBtn">Clique-moi</button>
2
3 <script>
4 document.getElementById("myBtn").addEventListener("click", function (event) {
5 console.log(event); // Affiche l'objet event dans la console
6 });
7 </script>

13
L’Objet Event (Exemple)
1 document.querySelector("button").addEventListener("click", function(event) {
2 console.log("Type d'événement:", event.type); // "click"
3 console.log("Élément cible:", event.target); // L'élément sur lequel l'événemen
4 console.log("Position X:", event.clientX); // Position X de la souris (pour é
5
6
7 });

14
Exemple d’event associé à la souris
(Mouse Events)
click → Lorsqu’on clique sur un élément
dblclick → Lorsqu’on double-clique
mouseover → Lorsque la souris passe sur un élément
mouseout → Lorsque la souris quitte un élément
1 <button id="mouseBtn">Passe ta souris ici</button>
2
3 <script>
4 document.getElementById("mouseBtn").addEventListener("mouseover", function () {
5 alert("La souris est passée sur le bouton !");
6 });
7 </script>

15
Exemple d’event associé au clavier
(Keyboard Events)
keydown → Lorsqu’une touche est pressée
keyup → Lorsqu’une touche est relâchée
keypress → (Obsolète, utiliser keydown à la place)
1 <input type="text" id="myInput" placeholder="Tape quelque chose" />
2
3 <script>
4 document.getElementById("myInput").addEventListener("keydown", function (event)
5 console.log("Touche pressée :", event.key);
6 });
7 </script>

16
Exemple d’event associé au
chargement (Load Event)
load → Lorsque la page est chargée : images, styles, etc
(après DOMContentLoaded)
DOMContentLoaded → Lorsque le DOM est chargé : Document
chargé et analysé (sans attendre les images et les styles)
1 <script>
2 window.addEventListener("load", function () {
3 alert("La page est chargée !");
4 });
5 </script>

17
Exemple d’event associé à un
formulaire (Form Events)
submit → Lorsqu’un formulaire est soumis
change → Lorsqu’une valeur d’un champ change
focus → Lorsqu’un champ reçoit le focus

1 <form id="myForm">
2 <input type="text" id="name" placeholder="Entrez votre nom" />
3 <button type="submit">Envoyer</button>
4 </form>
5
6 <script>
7 document.getElementById("myForm").addEventListener("submit", function (event) {
8 event.preventDefault(); // Empêche la page de se recharger
9 alert("Formulaire soumis !");
10 });
11
12 document.getElementById("name").addEventListener("change", function () {
13 alert("Nom modifié !");
14 });
15 </script>

18
Empêcher le comportement par
défaut
Pour empêcher l’action par défaut d’un event (ex: soumission
de formulaire), on utilise event.preventDefault().
1 <form id="myForm">
2 <input type="text" id="name" placeholder="Entrez votre nom" />
3 <button type="submit">Envoyer</button>
4 </form>
5
6 <script>
7 document.getElementById("myForm").addEventListener("submit", function (event) {
8 event.preventDefault(); // Empêche la soumission du formulaire
9 alert("Formulaire soumis !");
10 });
11 </script>

19
Accéder à l’élément cible
L’objet event contient une propriété target qui permet
d’accéder à l’élément qui a déclenché l’event.
1 <button id="myBtn">Clique-moi</button>
2 <script>
3 document.getElementById("myBtn").addEventListener("click", function (event) {
4 event.target.style.color = "red";
5 });
6
7 </script>

20
Supprimer des Event Listeners
Pour supprimer un Event Listener, on utilise la méthode
removeEventListener avec les mêmes arguments que
addEventListener.
1 element.removeEventListener(type, callback);

21
Supprimer un Event Listener (Suite)
Pour retirer un event, on utilise removeEventListener().
1 <button id="btn" type="button"> Cliquer </button>
2
3
4 <!-- Ajouter un script pour afficher une alerte lorsqu'on clique
5 sur le bouton -->
6 <script>
7 //bouton add event listener click alert
8
9 //recuperer le bouton
10 var btn = document.getElementById('btn');
11 //ajouter un event listener
12 const clickHandler = () => {
13 alert('Vous avez cliqué sur le bouton');
14 };
15 btn.addEventListener('click', clickHandler);
16
17 // attendre 5 seconde avant de supprimer listener
18 setTimeout(() => {

22
Exemple : Manipulation du DOM avec
Events
1 // HTML: <p id="texte">Texte initial</p>
2 // <button id="changeur">Changer le texte</button>
3
4 document.getElementById("changeur").addEventListener("click", function() {
5 // Récupérer l'élément par son ID et modifier son contenu
6 const paragraphe = document.getElementById("texte");
7 paragraphe.textContent = "Le texte a été modifié!";
8 paragraphe.style.color = "red";
9 });

Cet exemple montre comment modifier le contenu et le style

d’un élément suite à un clic.

23
Exemple : Formulaire Interactif
1 // HTML: <input id="email" type="email">
2 // <span id="validation"></span>
3
4 document.getElementById("email").addEventListener("keyup", function(event) {
5 const email = event.target.value;
6 const validationSpan = document.getElementById("validation");
7
8 if (email.includes('@') && email.includes('.')) {
9 validationSpan.textContent = "Email valide ✅";
10 validationSpan.style.color = "green";
11 } else {
12 validationSpan.textContent = "Email invalide ❌";
13 validationSpan.style.color = "red";
14 }
15 });

Ce cas d’usage montre une validation d’email en temps réel.

24
Exemple : Traverse du DOM
1 // HTML: <div id="parent">
2 // <button id="enfant">Cliquez-moi</button>
3 // </div>
4
5 document.getElementById("enfant").addEventListener("click", function(event) {
6 // Accéder à l'élément parent
7 const parent = event.target.parentElement;
8 parent.style.backgroundColor = "lightblue";
9
10 // Accéder aux éléments frères
11 const freres = Array.from(parent.children);
12 console.log("Nombre d'éléments frères:", freres.length);
13 });

25
Exemple : Création et Suppression
d’Éléments
1 // HTML: <ul id="liste"></ul>
2 // <button id="ajouteur">Ajouter un élément</button>
3 // <button id="suppresseur">Supprimer le dernier</button>
4
5 let compteur = 1;
6
7 document.getElementById("ajouteur").addEventListener("click", function() {
8 // Créer un nouvel élément
9 const nouvelElement = document.createElement("li");
10 nouvelElement.textContent = `Item ${compteur++}`;
11
12 // Ajouter l'élément à la liste
13 document.getElementById("liste").appendChild(nouvelElement);
14 });
15
16 document.getElementById("suppresseur").addEventListener("click", function() {
17 const liste = document.getElementById("liste");
18 if (liste.children.length > 0) {
26
Gestion des Événements avec des
Fonctions Fléchées
Les fonctions fléchées sont souvent utilisées pour les Event
Listeners.
1 document.getElementById("myBtn").addEventListener("click", (event) => {
2 console.log("Bouton cliqué !");
3 });

27
Délégation d’Événements
La délégation d’événements consiste à ajouter un seul
gestionnaire d’événement sur un élément parent, au lieu
d’en mettre un sur chaque élément enfant.
Ensuite, on utilise la propagation (bubbling) des
événements pour détecter l’élément cible sur lequel
l’utilisateur a cliqué.
le bubbling consiste à propager l’événement de l’élément
cible vers les éléments parents.

28
Délégation d’Événements (Suite)
Sans délégation Avec délégation:
1 document.querySelectorAll("li").forEac 1 document.getElementById("maListe").add
2 li.addEventListener("click", () => { 2 if (e.target.tagName === "LI") {
3 console.log("Élément cliqué"); 3 console.log("Élément cliqué :", e.
4 }); 4 }
5 }); 5 });

29
Avantages de la délégation
d’événements
Avantage Pourquoi c’est utile 💡
Performance Un seul écouteur au lieu de plusieurs
– idéal pour les longues listes
Support du Fonctionne même avec des
contenu éléments ajoutés après coup
dynamique
Code plus propre Moins de répétition, plus facile à
maintenir

30
Bonnes pratiques pour les Event
Listeners

31
La Propagation des Événements en
JavaScript
Quand vous cliquez sur un élément à l’intérieur d’un autre
élément, qui doit gérer l’événement en premier ? 🤔
La propagation des événements en JavaScript décide l’ordre
dans lequel les éléments reçoivent l’événement. Il existe
deux directions :
Bubbling (Propagation ascendante) : L’événement
commence sur l’élément cliqué et remonte vers les
parents.
Capturing (Propagation descendante) : L’événement
commence tout en haut et descend jusqu’à l’élément
cliqué.
On peut également décider d’arreter la propagation d’un
evenement. 32
1️⃣ Bubbling ( elements vers le
parent)
L’événement commence sur l’élément cliqué, puis remonte
vers les parents.
C’est le comportement par défaut en JavaScript.
1 <div id="parent" style="padding: 20px; background: lightblue;">
2 <button id="child">Clique-moi</button>
3 </div>
4
5 <script>
6 document.getElementById("child").addEventListener("click", function () {
7 alert("Enfant cliqué !");
8 });
9
10 document.getElementById("parent").addEventListener("click", function () {
11 alert("Parent cliqué !");
12 });
13 </script>

Que se passe-t-il quand vous cliquez sur le bouton ? 1️⃣

“Enfant cliqué !” s’affiche en premier.
2️⃣ “Parent cliqué !” s’affiche ensuite car l’événement remonte
jusqu’au #parent.

33
🛑 Arrêter la propagation avec
stopPropagation()
Cette méthode permet d’arrêter la propagation des
événements.
1 <div id="parent" style="padding: 20px; background: lightgreen;">
2 <button id="child">Clique-moi</button>
3 </div>
4
5 <script>
6 document.getElementById("child").addEventListener("click", function (event) {
7 alert("Enfant cliqué !");
8 event.stopPropagation(); // ⛔ Empêche la propagation vers le parent
9 });
10
11 document.getElementById("parent").addEventListener("click", function () {
12 alert("Parent cliqué ! (Mais cela ne s'affichera pas)");
13 });
14 </script>
Que se passe-t-il quand vous cliquez sur le bouton ? ✔️
Seulement “Enfant cliqué !” apparaît.
❌ “Parent cliqué !” ne s’affiche pas car stopPropagation()
empêche l’événement de remonter.

34
once pour un seul clic
La méthode once permet d’ajouter un event listener qui
s’exécute une seule fois.
1 <button id="btn">Cliquez une fois</button>
2
3 <script>
4 document.getElementById("btn").addEventListener("click", function () {
5 alert("Event exécuté !");
6 }, { once: true });
7 </script>

Après le premier clic, l’event listener est automatiquement

supprimé.

35