JavaScript
Les Evénements
Pr. Ahmed Drissi el maliani
FSR, April 25, 2025 1/47
Plan
Events
Event Handler
Types d’événements
Event Listeners
2/47
Introduction aux Événements HTML
• Les événements HTML sont des ”choses” qui arrivent aux éléments HTML:
• un utilisateur clique avec la souris
• une page web a chargé
• une image a été chargée
• la souris se déplace au-dessus d’un élément
• un champ de saisie est modifié
• un formulaire HTML est soumis
• Lorsque des événements se produisent, vous pouvez réagir.
• JavaScript permet d’exécuter du code lorsque des événements sont détectés.
3/47
Introduction aux Événements HTML
HTML permet d’ajouter des attributs de gestion d’événements, avec du code
JavaScript, aux éléments HTML.
• Avec des guillemets simples :
<element event=’code JavaScript’>
• Avec des guillemets doubles :
<element event=”code JavaScript”>
4/47
Exemple: Changer le Contenu d’un Élément
• Utilisation de l’attribut onclick pour changer le contenu d’un autre élément.
<button onclick=”[Link](’demo’).innerHTML = Goodbye!”>Hello!</button>
<p id=”demo”></p>
• Lorsque le bouton est cliqué, le code JavaScript à l’intérieur de l’attribut onclick
est exécuté.
5/47
Exemple: Changer le Contenu de l’Élément Lui-Même
Utilisation de l’attribut onclick et de [Link] pour changer le texte du
bouton.
<button onclick=”[Link] = ’Appuyer ici!’ ”>Click Here!</button>
• Dans ce cas, this fait référence à l’élément bouton lui-même.
6/47
Plan
Events
Event Handler
Types d’événements
Event Listeners
7/47
Event Handler (Gestionnaire d’événement)
Il est courant d’appeler une fonction (Event handler) depuis l’attribut d’événement.
<button onclick=”displayDate()”>Quel heure est−il ?</button>
<p id=”demo”></p>
La fonction est définie dans une balise <script> ou un fichier externe) :
function displayDate() {
[Link](”demo”).innerHTML = Date();
}
• Lorsque le bouton est cliqué, la fonction displayDate() est exécutée.
8/47
Façons d’attacher un Event handler
Approche HTML:
Attribut event (ex: onclick) d’un élement :
<button onclick=”displayDate()”>Cliquez−moi</button>
Approche Javascript (DOM):
1. Propriété event (ex: onclick) d’un élement :
[Link](”monBtn”).onclick = displayDate;
2. addEventListener (méthode moderne recommandée) :
[Link](”monBtn”).addEventListener(”click”, displayDate);
Attention: Dans l’approche JS, on référence la définition de la fonction et non son
appel.
9/47
Event handler via le DOM
En JS, le DOM HTML permet d’assigner l’event hanlder aux éléments HTML, lors de
la définition de l’event:
[Link] = function() {
// code de la fonction
};
10/47
Exemple
<html>
<body>
<button id=”myBtn”>Try it</button>
<p id=”demo”></p>
<script>
[Link](”myBtn”).onclick = displayDate;
function displayDate() {
[Link](”demo”).innerHTML = Date();
}
</script>
</body>
</html>
Exercice: refaire cet exemple en utilisant la definition de la fonction dans la propriété
onclick.
11/47
Exercice: Modification du Contenu au Clic
Dans cet exemple, le contenu de l’element <h2> est modifie lorsqu’un utilisateur clique
dessus.
<!DOCTYPE html>
<html>
<body>
<h2 id=”ttr2” onclick=”[Link] = ’Ooops!’”>Click on this text!</h2>
</body>
</html>
1. Modifier le contenu de l’élément h2 en appelant un Event Handler changeText().
2. Utiliser le handler via le DOM
12/47
Solution
<!DOCTYPE html>
<html>
<body>
<h2 id=”ttr2” onclick=”changeText()”>Click on this text!</h2>
<script>
function changeText() {
[Link](”ttr2”).innerHTML = ”Ooops!”;
}
</script>
</body>
</html>
13/47
Solution
<!DOCTYPE html>
<html>
<body>
<h2 id=”ttr2”>Click on this text!</h2>
<script>
function changeText() {
[Link](”ttr2”).innerHTML = ”Ooops!”;
}
[Link](”ttr2”).onclick=changeText;
</script>
</body>
</html>
Remarque: constatez ici la séparation entre HTML et JS dans la gestion des event
(grand avantage de l’approche DOM)
14/47
Plan
Events
Event Handler
Types d’événements
Event Listeners
15/47
Événements HTML Communs
Événement Description
onload Le navigateur a terminé de charger la page
oninput L’utilisateur effectue une saisie
onchange Un élément HTML a été modifié
onclick L’utilisateur clique sur un élément HTML
onmousedown L’utilisateur appuie sur un bouton de la souris sur un élément HTML
onmouseup L’utilisateur relâche un bouton de la souris sur un élément HTML
onmouseover L’utilisateur déplace la souris au-dessus d’un élément HTML
onmouseout L’utilisateur déplace la souris hors d’un élément HTML
onkeydown L’utilisateur appuie sur une touche du clavier
onfocus Un élément HTML reçoit le focus (clic ou navigation clavier)
16/47
L’Événement onload
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert(”This message was triggered from the onload event”);
}
</script>
</head>
<body onload=”mymessage()”>
<h1>JavaScript HTML Events</h1>
<h2>The onload Attribute</h2>
</body>
</html>
17/47
L’Évènement oninput
L’évènement oninput est utilisé pour déclencher une action pendant que l’utilisateur
entre des données.
Exemple :
Enter your name: <input type=”text” id=”fname” oninput=”upperCase()”>
<script>
function upperCase() {
const x = [Link](”fname”);
[Link] = [Link]();
}
</script>
18/47
L’Évènement onchange
L’évènement onchange est utilisé pour valider un champ après modification.
Exemple :
Enter your name: <input type=”text” id=”fname” onchange=”upperCase()”>
19/47
Évènements onmouseover et onmouseout
Ces évènements réagissent lorsque la souris passe sur un élément ou en sort.
Exemple :
<div onmouseover=”[Link]=’Bonjour’ ”
onmouseout=”[Link]=’Au revoir’ ”>Mouse over here</div>
20/47
Exercice
Modifiez la couleur du texte d’un titre <h1> lorsque la souris passe au-dessus (en
rouge), puis remettez la couleur noire lorsque la souris le quitte.
<!DOCTYPE html>
<html>
<body>
// code ici
</body>
</html>
21/47
Solution
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover=”[Link]=’red’ ”
onmouseout=”[Link]=’black’ ”>
Mouse over this text</h1>
</body>
</html>
22/47
Évènements onmousedown, onmouseup
Ces évènements réagissent à un clic de souris.
Exemple :
<button onmousedown=”[Link]=’Down’ ”
onmouseup=”[Link]=’Up’ ”>Thank You</button>
23/47
Exercice
Créez une div de taille 90px de large, 20px de hauteur, avec 40px de padding. Ajoutez
les attributs onmousedown et onmouseup pour changer sa couleur et son texte au clic.
Lorsqu’on clique, elle devient bleue avec le texte Release Me , puis revient au rouge
avec Thank You au relâchement.
24/47
Solution
<!DOCTYPE html>
<html>
<body>
<div onmousedown=”mDown(this)” onmouseup=”mUp(this)”
style=”background−color:red;width:90px;height:20px;padding:40px;”>
Click Me</div>
<script>
function mDown(obj) {
[Link] = ”blue”;
[Link] = ”Release Me”;
}
function mUp(obj) {
[Link]=”red”;
[Link]=”Thank You”;
}
</script>
</body>
</html>
25/47
L’événement onfocus
L’événement onfocus est déclenché lorsqu’un élément reçoit le focus, c’est-à-dire
lorsque l’utilisateur clique ou tabule sur un élément interactif (comme un champ de
formulaire).
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
[Link] = ”yellow”;
}
</script>
</head>
<body>
Enter your name: <input type=”text” onfocus=”myFunction(this)”>
</body>
</html>
26/47
Exercice
Afficher le compteur dans un élément <h1> au lieu d’utiliser une alert.
27/47
Solution
28/47
Exercice
Modifier la solution pour qu’une alert s’affiche (après 10 clicks) affichant que le
compte maintenant est 10, 20, 30, ....
29/47
Solution
<head>
<title> Counter</title>
<script>
let counter=0;
function count(){
counter=counter+1;
[Link](’h1’).innerHTML=counter;
if(counter%10==0){
alert(‘The count is now ${counter}‘);
}
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick=”count()”>Count</button>
</body>
</html>
30/47
Exercice
• Définir un élément de titre <h1> avec le texte Bonjour ! .
• Ajouter un bouton Cliquez ici .
• Lorsque l’utilisateur clique sur le bouton, le texte du titre change en Au revoir
!.
• Si l’utilisateur clique à nouveau, le texte revient à Bonjour!, et ainsi de suite à
chaque clic.
31/47
Plan
Events
Event Handler
Types d’événements
Event Listeners
32/47
Syntaxe de addEventListener()
Syntaxe :
[Link](event, listener, useCapture);
• event :
Le type d’événement à écouter (ex : "click", "mousedown").
Ne pas utiliser le préfixe "on" (écrire "click" et non "onclick").
• listener :
La fonction callback (handler) à exécuter lorsque l’événement se déclenche.
• useCapture (optionnel) :
Valeur booléenne qui indique si l’événement doit être capturé pendant la phase de
capture (true) ou de propagation/bubbling (false, par défaut).
33/47
Exemple 1 : Alerte au Clic (Fonction Anonyme)
Alerter ”Hello World!” lorsque l’utilisateur clique sur un element.
[Link](”click”, function(){ alert(”Hello World!”); });
34/47
Exemple 2 : Alerte au Clic (Fonction Nommée)
Alerter ”Hello World!” lorsque l’utilisateur clique sur un element en referencant une
fonction externe.
[Link](”click”, myFunction);
function myFunction() {
alert (”Hello World!”);
}
35/47
Avantages de addEventListener()
• Sépare le JavaScript du HTML → meilleure lisibilité.
• Compatible avec tous les éléments du DOM (HTML, window, etc.).
• Permet d’ajouter plusieurs écouteurs sur le même événement (ex : deux “clicks”).
• Ne remplace pas les gestionnaires existants
• Possibilité de gérer la phase de capture ou de propagation (bubbling).
• Permet de supprimer les listeners
36/47
Séparation HTML JS
La méthode addEventListener() permet une séparation totale entre HTML et JS :
<!DOCTYPE html>
<html>
<body>
<h2>Event listener</h2>
<button id=”myBtn”>Try it</button>
<script>
[Link](”myBtn”).addEventListener(”click”, function() {
alert(”Hello World!”);
});
</script>
</body>
</html>
37/47
Ajouter un Gestionnaire d’Événement à l’Objet window
La méthode addEventListener() permet d’ajouter des écouteurs d’événement sur
n’importe quel objet DOM :
• Les éléments HTML (ex : <button>, <div>, etc.)
• L’objet document
• L’objet window
• D’autres objets prenant en charge les événements (ex : XMLHttpRequest)
Exemple : Déclencher une action lors du redimensionnement de la fenêtre :
<div id=”demo”></div>
<script>
[Link](”resize”, function(){
[Link](”demo”).innerHTML =
”Fenetre redimensionne !”;
});
</script>
38/47
Ajouter Plusieurs Gestionnaires au Meme Element
La methode addEventListener() permet d’ajouter plusieurs evenements au meme
element, sans ecraser les evenements existants.
Exemple : Ajouter deux ecouteurs pour l’evenement ”click” :
[Link](”click”, myFunction);
[Link](”click”, mySecondFunction);
39/47
Ajouter des Evenements de Types Differents
Vous pouvez ajouter des evenements de differents types au meme element.
Exemple : Ajouter des ecouteurs pour ”mouseover”, ”click” et ”mouseout” :
[Link](”mouseover”, myFunction);
[Link](”click”, mySecondFunction);
[Link](”mouseout”, myThirdFunction);
40/47
Passer des Paramètres aux Gestionnaires d’Événements
• Pour passer des paramètres à une fonction dans un gestionnaire d’événement :
• on utilise une fonction anonyme ou une fonction fléchée.
• cette fonction permet d’appeler la fonction cible avec les paramètres souhaités.
• Syntaxe générale :
[Link](”click”, function() {
myFunction(p1, p2);
});
function myFunction(param1, param2) {
[Link](”Paramtre 1 :”, param1);
[Link](”Paramtre 2 :”, param2);
}
41/47
Event Bubbling ou Event Capturing ?
Il existe deux façons de propager les événements dans le DOM HTML : bubbling et
capturing.
La propagation d’un événement détermine l’ordre des éléments HTML impliqués
lorsqu’un événement est déclenché.
42/47
Ordre de propagation
Exemple : un élément <p> à l’intérieur d’un <div>.
• En bubbling, l’événement est capté d’abord par l’élément le plus profond (ici
<p>), puis remonte.
• En capturing, l’événement est capté d’abord par l’élément le plus extérieur (ici
<div>), puis descend.
43/47
Utiliser addEventListener()
Avec addEventListener(), on peut spécifier le type de propagation avec le
paramètre useCapture :
addEventListener(event, function, useCapture);
Valeur par défaut : false → mode bubbling. Valeur à true → mode capturing.
44/47
Exemple de Capturing
Dans cet exemple, les deux écouteurs utilisent la propagation en mode capturing :
[Link](”myP”)
.addEventListener(”click”, myFunction, true);
[Link](”myDiv”)
.addEventListener(”click”, myFunction, true);
45/47
Suppression avec removeEventListener()
• Chaque écouteur peut être retiré à l’aide de removeEventListener().
• Important pour libérer des ressources.
• Nécessite de référencer exactement la fonction utilisée lors de l’ajout.
function handleClick() {
alert(”Clic !”);
}
[Link](”click”, handleClick);
// Plus tard...
[Link](”click”, handleClick);
46/47
Suppression avec removeEventListener()
On peut supprimer un gestionnaire d’événement avec removeEventListener() :
[Link](”mousemove”, myFunction);
Cela ne fonctionne que si le gestionnaire a été ajouté avec addEventListener() et
avec les mêmes paramètres.
47/47