ES6 - Événements

JavaScript est destiné à ajouter de l'interactivité à vos pages. JavaScript fait cela en utilisant un mécanisme utilisant des événements.Events 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.

Un événement est une action ou une occurrence reconnue par le logiciel. Il peut être déclenché par un utilisateur ou le système. Certains exemples courants d'événements incluent un utilisateur cliquant sur un bouton, chargeant la page Web, cliquant sur un lien hypertexte, etc. Voici quelques-uns des événements HTML courants.

Gestionnaires d'événements

Lors de l'occurrence d'un événement, l'application exécute un ensemble de tâches associées. Le bloc de code qui atteint cet objectif est appelé leeventhandler. Chaque élément HTML est associé à un ensemble d'événements. Nous pouvons définir comment les événements seront traités en JavaScript en utilisant des gestionnaires d'événements.

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 placer votre validation, avertissement, etc. par rapport à ce type d'événement.

Exemple

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

onsubmitEvent Type

onsubmitest un événement qui se produit lorsque vous essayez d'envoyer un formulaire. Vous pouvez comparer la validation de votre formulaire à ce type d'événement.

L'exemple suivant montre comment utiliser onsubmit. Ici, nous appelons une fonction validate () avant de soumettre les données d'un formulaire au serveur Web. Si la fonction validate () renvoie true, le formulaire sera soumis, sinon il ne soumettra pas les données.

Exemple

<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 jolis effets avec des images ou même avec du texte. leonmouseover L'événement se déclenche lorsque vous amenez votre souris sur un élément et que onmouseout se déclenche lorsque vous déplacez votre souris hors de cet élément.

Exemple

<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>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Événements standard HTML 5

Les événements HTML 5 standard sont répertoriés dans le tableau suivant à titre de référence. Le script indique une fonction JavaScript à exécuter sur cet événement.

Attribut Valeur La description
hors ligne scénario Se déclenche lorsque le document est hors ligne
onabort scénario Déclenchements sur un événement d'abandon
sur la réimpression scénario Déclenchements après l'impression du document
onbeforeonload scénario Déclencheurs avant le chargement du document
onbeforeprint scénario Déclenchements avant l'impression du document
le flou scénario Se déclenche lorsque la fenêtre perd le focus
oncanplay scénario Déclenche lorsque le média peut démarrer la lecture, mais doit peut-être s'arrêter pour la mise en tampon
oncanplaythrough scénario 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 par un clic de souris
oncontextmenu scénario Déclenchement lorsqu'un menu contextuel est déclenché
ondblclick scénario Déclenchement par un double-clic de souris
ondrag scénario Se déclenche lorsqu'un élément est déplacé
ondragend scénario Déclenchements à la fin d'une opération de glissement
ondragenter scénario Se déclenche lorsqu'un élément a été glissé vers une cible de dépôt valide
ondragleave scénario Se déclenche lorsqu'un élément quitte une cible de dépôt valide
ondragover scénario Se déclenche lorsqu'un élément est glissé sur une cible de dépôt valide
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
onemptied scénario Se déclenche lorsqu'un élément de ressource multimédia devient soudainement vide
reporté scénario Se déclenche lorsque le média a atteint la fin
onerror scénario Se déclenche lorsqu'une erreur se produit
onfocus 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
onhaschange 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
oninvalid 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
onloadeddata scénario Se déclenche lorsque les données multimédias sont chargées
onloadedmetadata 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
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é
à la souris scénario Se déclenche lorsque le pointeur de la souris se déplace
à la souris scénario Se déclenche lorsque le pointeur de la souris sort d'un élément
onmouseover scénario Se déclenche lorsque le pointeur de la souris se déplace sur un élément
onmouseup scénario Se déclenche lorsqu'un bouton de la souris est relâché
roue de secours scénario Se déclenche lors de la rotation de la molette de la souris
en ligne scénario Se déclenche lorsque le document est hors ligne
en ligne scénario Se déclenche lorsque le document est mis en ligne
onpagehide scénario Se déclenche lorsque la fenêtre est masquée
onpageshow 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 mises en pause
onplay scénario Se déclenche lorsque la lecture des données multimédias va commencer
en cours de lecture scénario Se déclenche lorsque la lecture des données multimédias a commencé
onpopstate scénario Se déclenche lorsque l'historique de la fenêtre change
progresse scénario Se déclenche lorsque le navigateur récupère les données multimédias
onratechange scénario Se déclenche lorsque la vitesse de lecture des données multimédias a changé
onreadystatechange scénario Se déclenche lorsque l'état prêt change
onredo scénario Se déclenche lorsque le document effectue une restauration
onresize scénario Se déclenche lorsque la fenêtre est redimensionnée
onscroll scénario Se déclenche lorsque la barre de défilement d'un élément est en cours de défilement
à la recherche 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é
onselect scénario Se déclenche lorsqu'un élément est sélectionné
installé scénario Se déclenche lorsqu'il y a une erreur lors de la récupération des données multimédias
au stockage scénario Se déclenche lors du chargement d'un document
onsubmit scénario Se déclenche lorsqu'un formulaire est soumis
mise en suspension 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 ait été récupérée
à jour scénario Se déclenche lorsque le média change sa position de lecture
onundo scénario Se déclenche lorsqu'un document effectue une annulation
en déchargement scénario Se déclenche lorsque l'utilisateur quitte le document
onvolumechange scénario Se déclenche lorsque le média change le volume, également lorsque le volume est réglé sur "muet"
en attente scénario Se déclenche lorsque la lecture du média a cessé, mais devrait reprendre