JavaScript
JavaScript est un langage de programmation principalement utilisé pour le
développement web. Les événements JavaScript permettent aux développeurs de créer
des interactions dynamiques en répondant aux actions des utilisateurs ou aux
modifications de l'état du navigateur. Voici quelques événements courants en
JavaScript :
1- Événements de souris :
1. click : Se déclenche lorsqu'un élément est cliqué.
2. dblclick : Se déclenche lorsqu'un élément est double-cliqué.
3. mouseover : Se déclenche lorsqu'un curseur de souris survole un élément.
4. mouseout : Se déclenche lorsqu'un curseur de souris quitte un élément.
5. mousemove : Se déclenche lorsqu'un curseur de souris se déplace sur un élément.
2- Événements de clavier :
1. keydown : Se déclenche lorsqu'une touche du clavier est enfoncée.
2. keyup : Se déclenche lorsqu'une touche du clavier est relâchée.
3. keypress : Se déclenche lorsqu'une touche du clavier est enfoncée et relâchée.
3- Événements de formulaire :
1. submit : Se déclenche lorsqu'un formulaire est soumis.
2. change : Se déclenche lorsqu'une valeur d'un élément <input>, <select>, ou
<textarea> est modifiée.
3. focus : Se déclenche lorsqu'un élément reçoit le focus.
4. blur : Se déclenche lorsqu'un élément perd le focus.
4- Événements de fenêtre :
1. load : Se déclenche lorsque la page entière, y compris toutes les ressources
dépendantes (images, scripts, etc.), est complètement chargée.
2. resize : Se déclenche lorsqu'une fenêtre ou un cadre est redimensionné.
3. scroll : Se déclenche lorsqu'une barre de défilement d'un élément est déplacée.
5- Événements de touche tactile (pour les appareils mobiles) :
1. touchstart : Se déclenche lorsqu'un point de contact est placé sur la surface
tactile.
2. touchmove : Se déclenche lorsqu'un point de contact est déplacé le long de la
surface tactile.
3. touchend : Se déclenche lorsqu'un point de contact est retiré de la surface tactile.
Voici un exemple simple d'utilisation d'un événement de clic en JavaScript :
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement de clic</title>
</head>
<body>
<button id="clickButton">Cliquez-moi</button>
<p id="clickMessage"></p>
<script>
[Link]("clickButton").addEventListener("click", function() {
[Link]("clickMessage").innerText = "Bouton cliqué !";
});
</script>
</body>
</html>
Exemple 2 : Événement de survol de la souris ( mouseover)
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement de survol de la souris</title>
</head>
<body>
<div id="hoverDiv" style="width: 200px; height: 200px; background-
color: lightblue;"></div>
<p id="hoverMessage"></p>
<script>
[Link]("hoverDiv").addEventListener("mouseover"
, function() {
[Link]("hoverMessage").innerText = "Vous
survolez la zone bleue !";
});
[Link]("hoverDiv").addEventListener("mouseout",
function() {
[Link]("hoverMessage").innerText = "";
});
</script>
</body>
</html>
Exemple 3 : Événement de contact ( keydown)
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement de touche</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Tapez quelque
chose">
<p id="keyMessage"></p>
<script>
[Link]("textInput").addEventListener("keydown",
function(event) {
[Link]("keyMessage").innerText = "Touche
enfoncée : " + [Link];
});
</script>
</body>
</html>
Exemple 4 : Événement de soumission de formulaire ( submit)
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement de soumission de formulaire</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username" placeholder="Nom
d'utilisateur" required>
<button type="submit">Soumettre</button>
</form>
<p id="formMessage"></p>
<script>
[Link]("myForm").addEventListener("submit",
function(event) {
[Link]();
[Link]("formMessage").innerText =
"Formulaire soumis !";
Exemple 5 : Événement de changement ( change)
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement de changement</title>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<p id="selectMessage"></p>
<script>
[Link]("mySelect").addEventListener("change",
function() {
const selectedOption = [Link];
[Link]("selectMessage").innerText = "Vous
avez sélectionné : " + selectedOption;
});
</script>
</body>
</html>
