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 JavaScript, ce qui entraîne la fermeture des fenêtres, l'affichage des messages aux utilisateurs, la validation des données et pratiquement tout autre type de réponse imaginable.

Les événements font partie du modèle d'objet de document (DOM) niveau 3 et chaque élément HTML contient un ensemble d'événements qui peuvent déclencher du code JavaScript.

Veuillez parcourir ce petit tutoriel pour une meilleure compréhension de la référence d'événements 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>

Production

Type d'événement onsubmit

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.

Exemple

L'exemple suivant montre comment utiliser onsubmit. Ici, nous appelons unvalidate()avant de soumettre les données d'un formulaire au serveur Web. Sivalidate() La fonction renvoie true, 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 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 onmouseoutse 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>

Production

Événements standard 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 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 mémoire 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 est glissé 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 glissé 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 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
onoine 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
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 modifie le volume, également lorsque le volume est réglé sur "muet"
en attente scénario Se déclenche lorsque la lecture du contenu multimédia a cessé, mais devrait reprendre