NIVEAU : 4ème SI
Lycée Secondaire Mahmoud el Messaâdi
Matière : Systèmes & Technologies de
Ettadhamen, ARIANA
l’Informatique
*********************
****************
*********
PROFESSEUR : Mervet Hakiri Domaine d’apprentissage :
Développement Web
Les événements en JavaScript sont des actions qui se produisent et auxquelles on peut répondre en
exécutant du code. Par exemple, un événement peut être le clic de souris, la modification d'un champ de
saisie dans un formulaire, ou le chargement d'une page., le survol de la souris, …
En JavaScript, il existe plusieurs façons d'implémenter un gestionnaire d'événements, notamment
en utilisant des attributs HTML de type événement (ce qui n'est pas recommandé), des propriétés
JavaScript liées aux événements, ou la méthode addEventListener() (recommandée pour des raisons de
performance).
Cet événement se produit lorsqu'un élément perd le focus. Par exemple, si un
utilisateur clique sur un champ de formulaire, puis clique ailleurs, l'événement onblur se produit pour
le champ de formulaire.
Exemple :
<input type = "text" onblur = "alert('Input perd le focus')" />
Ou bien <input type = "text" onblur = "correction()" />
Cet événement se produit lorsqu'un utilisateur clique sur un élément.
Exemple:
<button onclick = "alert('Bouton cliqué')">Click me!</button>
Ou bien <input type="text" onclick = " verif()" />
Cet événement se produit lorsqu'un élément prend le focus c’est-à-dire lorsqu’il est
sélectionné.
Exemple :
<input type="text" onfocus = "alert('Input prend le focus')" />
Page 1 sur 3
Ou bien <input type = "text" onfocus = "change()" />
Cet événement se produit lorsqu'un utilisateur effectue une modification sur la
valeur d’un champ de formulaire.
Exemple:
<input type="text" oninput = "alert('Champ modifié')" />
Ou bien <input type = "text" oninput = "modif()" />
Cet événement se produit lorsque la page web est complètement chargée.
Exemple:
<body onload = "alert('Page chargé')">
<!-- contenu de la page -->
</body>
Oubien
<body onload="date()">
<!-- contenu de la page -->
</body>
Cet événement se produit lorsqu'un utilisateur survole un élément avec la
souris.
Exemple:
<img src = "[Link]" onmouseover = "alert('Curseur survole l’image')" />
Ou bien <img src = "[Link]" onmouseover = "effet()" />
Cet événement se produit lorsqu'un utilisateur envoie un formulaire en cliquent
sur un bouton de type « submit ».
Exemple:
<form onsubmit = "alert('Formulaire envoyé')">
<!-- contenu du formulaire -->
<input type="submit" value="Envoyer">
</form>
Ou bien <form onsubmit = "return verif()">
Les événements sont un aspect clé de l'interaction utilisateur dans les applications web.
Page 2 sur 3
Evènements Eléments concernés
Case à cocher (checkbox)
Bouton radio (radio)
onclick
Zone de liste (select)
Bouton d’action
Champ de texte (text)
Case à cocher (checkbox)
onblur
Bouton radio (radio)
onfocus
Zone de liste (select)
Zone de texte (textarea)
Champ de texte (text)
oninput Zone de liste (select)
Zone de texte (textarea)
<a>
<area>
onmouseover <button>
<img>
…….
onload <body>
onsubmit <form>
Page 3 sur 3