JavaScript – Événements
Qu’est-ce qu’un événement ?
L’interaction de JavaScript avec HTML est gérée par des événements qui se produisent lorsque l’utilisateur ou le navigateur manipule une page.
Lorsque la page se charge, cela s’appelle un événement. Lorsque l’utilisateur clique sur un bouton, ce clic est également un événement. D’autres exemples incluent des événements tels que l’appui sur n’importe quelle touche, la fermeture d’une fenêtre, le redimensionnement d’une fenêtre, etc.
Les développeurs peuvent utiliser ces événements pour exécuter des réponses codées en JavaScript, ce qui entraîne la fermeture de fenêtres par des boutons, l’affichage de messages aux utilisateurs, la validation de données et pratiquement tout autre type de réponse imaginable.
Les événements font partie du Document Object Model (DOM) Niveau 3 et chaque élément HTML contient un ensemble d’événements qui peuvent déclencher du code JavaScript.
Veuillez suivre ce petit tutoriel pour une meilleure compréhension de la référence d’événement HTML. Nous allons voir ici quelques exemples pour comprendre une relation entre Event et JavaScript −
Type d’événement onclick
C’est le type d’événement le plus fréquemment utilisé qui se produit lorsqu’un utilisateur clique sur le bouton gauche de sa souris. Vous pouvez mettre votre validation, avertissement, etc., contre ce type d’événement.
Exemple
Essayez l’exemple suivant.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
Sortir
Type d’événement
lors de la soumission est un événement qui se produit lorsque vous essayez de soumettre un formulaire. Vous pouvez placer la validation de votre formulaire par rapport à ce type d’événement.
Exemple
L’exemple suivant montre comment utiliser onsubmit. On appelle ici un valider() fonction avant de soumettre les données d’un formulaire au serveur Web. Si valider() fonction renvoie vrai, le formulaire sera soumis, sinon il ne soumettra pas les données.
Essayez l’exemple suivant.
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
onmouseover et onmouseout
Ces deux types d’événements vous aideront à créer de beaux effets avec des images ou même avec du texte. Le surmouseover événement se déclenche lorsque vous placez votre souris sur n’importe quel élément et que le onmouseout se déclenche lorsque vous déplacez votre souris hors de cet élément. Essayez l’exemple suivant.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Sortir
Événements standards HTML 5
Les événements HTML 5 standard sont répertoriés ici pour votre référence. Ici, le script indique une fonction Javascript à exécuter contre cet événement.
| Attribut | Valeur | Description |
|---|---|---|
| Hors ligne | scénario | Se déclenche lorsque le document est hors ligne |
| Abandonner | scénario | Déclenche un événement d’abandon |
| surimpression | scénario | Se déclenche après l’impression du document |
| avant le chargement | scénario | Déclenchements avant le chargement du document |
| avant impression | scénario | Se déclenche avant l’impression du document |
| le flou | scénario | Se déclenche lorsque la fenêtre perd le focus |
| oncanplay | scénario | Se déclenche lorsque le média peut commencer à jouer, mais peut devoir s’arrêter pour la mise en mémoire tampon |
| oncanplaythrough | scénario | Se déclenche lorsque le média peut être lu jusqu’à la fin, sans s’arrêter pour la mise en mémoire tampon |
| sur le changement | scénario | Se déclenche lorsqu’un élément change |
| sur clic | scénario | Déclenchement sur un clic de souris |
| oncontextmenu | scénario | Se déclenche lorsqu’un menu contextuel est déclenché |
| ondblclick | scénario | Déclenchements sur un double-clic de souris |
| ondrag | scénario | Se déclenche lorsqu’un élément est déplacé |
| ondragend | scénario | Se déclenche à la fin d’une opération de glissement |
| ondragenter | scénario | Se déclenche lorsqu’un élément a été déplacé vers une cible de dépôt valide |
| ondragleave | scénario | Se déclenche lorsqu’un élément est déplacé sur une cible de dépôt valide |
| ondragover | scénario | Se déclenche au début d’une opération de glissement |
| ondragstart | scénario | Se déclenche au début d’une opération de glissement |
| ondrop | scénario | Se déclenche lorsque l’élément déplacé est déposé |
| ondurationchange | scénario | Se déclenche lorsque la longueur du support est modifiée |
| non vidé | scénario | Se déclenche lorsqu’un élément de ressource multimédia devient soudainement vide. |
| terminé | scénario | Se déclenche lorsque le média a atteint la fin |
| une erreur | scénario | Se déclenche lorsqu’une erreur se produit |
| focus | scénario | Se déclenche lorsque la fenêtre obtient le focus |
| onformchange | scénario | Se déclenche lorsqu’un formulaire change |
| onforminput | scénario | Se déclenche lorsqu’un formulaire reçoit une entrée utilisateur |
| onachange | scénario | Se déclenche lorsque le document a changé |
| en entrée | scénario | Se déclenche lorsqu’un élément reçoit une entrée utilisateur |
| sur invalide | scénario | Se déclenche lorsqu’un élément n’est pas valide |
| onkeydown | scénario | Se déclenche lorsqu’une touche est enfoncée |
| onkeypress | scénario | Se déclenche lorsqu’une touche est enfoncée et relâchée |
| onkeyup | scénario | Se déclenche lorsqu’une touche est relâchée |
| en charge | scénario | Se déclenche lors du chargement du document |
| données chargées | scénario | Se déclenche lorsque les données multimédias sont chargées |
| métadonnées chargées | scénario | Se déclenche lorsque la durée et d’autres données multimédias d’un élément multimédia sont chargées |
| onloadstart | scénario | Se déclenche lorsque le navigateur commence à charger les données multimédias |
| sur message | scénario | Se déclenche lorsque le message est déclenché |
| onmousedown | scénario | Se déclenche lorsqu’un bouton de la souris est enfoncé |
| onmousemove | scénario | Se déclenche lorsque le pointeur de la souris se déplace |
| onmouseout | scénario | Se déclenche lorsque le pointeur de la souris sort d’un élément |
| surmouseover | scénario | Se déclenche lorsque le pointeur de la souris passe sur un élément |
| onmouseup | scénario | Se déclenche lorsqu’un bouton de la souris est relâché |
| sur la molette de la souris | scénario | Se déclenche lorsque la molette de la souris tourne |
| en ligne | scénario | Se déclenche lorsque le document est hors ligne |
| onoïne | scénario | Se déclenche lorsque le document est mis en ligne |
| en ligne | scénario | Se déclenche lorsque le document est mis en ligne |
| sur la pagemasquer | scénario | Se déclenche lorsque la fenêtre est masquée |
| surpageafficher | scénario | Se déclenche lorsque la fenêtre devient visible |
| en pause | scénario | Se déclenche lorsque les données multimédias sont en pause |
| en jeu | scénario | Se déclenche lorsque les données multimédias vont commencer à jouer |
| en cours de lecture | scénario | Se déclenche lorsque les données multimédias ont commencé à jouer |
| onpopstate | scénario | Se déclenche lorsque l’historique de la fenêtre change |
| en cours | scénario | Se déclenche lorsque le navigateur récupère les données multimédias |
| surchangement de taux | scénario | Se déclenche lorsque le taux de lecture des données multimédias a changé |
| onreadystatechange | scénario | Se déclenche lorsque l’état prêt change |
| onrefait | scénario | Se déclenche lorsque le document effectue une restauration |
| redimensionner | scénario | Se déclenche lorsque la fenêtre est redimensionnée |
| faire défiler | scénario | Se déclenche lorsque la barre de défilement d’un élément défile |
| recherché | scénario | Se déclenche lorsque l’attribut de recherche d’un élément multimédia n’est plus vrai et que la recherche est terminée |
| à la recherche | scénario | Se déclenche lorsque l’attribut de recherche d’un élément multimédia est vrai et que la recherche a commencé |
| surselect | scénario | Se déclenche lorsqu’un élément est sélectionné |
| installé | scénario | Se déclenche en cas d’erreur lors de la récupération des données multimédias |
| surstockage | scénario | Se déclenche lors du chargement d’un document |
| lors de la soumission | scénario | Se déclenche lorsqu’un formulaire est soumis |
| suspendre | scénario | Se déclenche lorsque le navigateur a récupéré des données multimédias, mais s’est arrêté avant que l’intégralité du fichier multimédia ne soit récupérée |
| mise à jour ponctuelle | scénario | Se déclenche lorsque le média change de position de lecture |
| annuler | scénario | Se déclenche lorsqu’un document effectue une annulation |
| au déchargement | scénario | Se déclenche lorsque l’utilisateur quitte le document |
| surchangementdevolume | scénario | Se déclenche lorsque le média modifie le volume, également lorsque le volume est réglé sur “muet” |
| en attente | scénario | Se déclenche lorsque le média a cessé de jouer, mais devrait reprendre |
#JavaScript #Événements