Introduction aux événements HTML
HyperText Markup Language (HTML) est un langage hypertexte qui crée une conception Web. il est affiché sur n'importe quel navigateur Web. Les événements HTML sont l'action. chaque utilisateur de clic reçoit une réaction d'un navigateur appelé Action. Ce processus est connu sous le nom d'événement.
Disons que si la page Web a un formulaire, l'utilisateur remplit ce formulaire, puis l'utilisateur obtient deux clés, l'une est envoyée et l'autre est annulée. Lorsque les utilisateurs appuient sur le bouton Envoyer, les données du formulaire sont enregistrées. Sur le bouton Annuler, annulez les données du formulaire et actualisez à nouveau le formulaire. Cette action de bouton appelée événement. cet événement dépend des actions des utilisateurs.
Différents types d'événements HTML
Il existe de nombreux attributs d'événement disponibles en HTML5, qui sont classés principalement en 6 types différents. Ces attributs fonctionnent en utilisant le langage JavaScript.
- Attributs d'événements Windows: ils sont fournis pour l'action de l'objet Windows. Cela fonctionne dans la balise body.
- Attributs d'événement de formulaire: Si l'utilisateur effectue une action dans le formulaire comme les données d'entrée, annulez, soumettez, puis ces attributs d'événement fonctionnent.
- Attributs d'événement du clavier: ces attributs d'événement du clavier utilisés pour l'action du clavier et l'interaction avec l'utilisateur.
- Attributs d'événement de souris: attribut d'événement de souris utilisé pour l'action de la souris qui est déplacer, cliquer, tourner, etc.
- Attributs d'événement du presse-papiers: ces attributs d'événement utilisés pour l'action du presse-papiers. Exemple coupe, copie, ravageur.
- Attributs d'événement multimédia: cet attribut d'événement fonctionne sur les fichiers multimédias comme la vidéo, etc.
Description des attributs d'événement
Voici quelques explications des attributs d'événement qui sont donnés ci-dessous en détail:
1. Attributs d'événements Windows
|
Attribut |
La description |
| après impression | Ce script agit cependant après l'impression du document. |
| avant impression | Ce script agit cependant avant l'impression d'un document. |
| onbeforeunload | Alors qu'avant le document déchargé, ce script fonctionne. |
| onerror | Dans le document se produit l'erreur puis cet événement exécuté. |
| onhashchange | La partie d'ancrage du changement d'URL dans le document que l'événement de temps a exécuté. |
| en charge | Lorsque la première page Web est complètement chargée, cet événement est exécuté. |
| onmessage | Dans le document, le message s'est produit au moment où l'événement a été exécuté. |
| hors ligne | Si la connexion réseau n'est pas disponible et que le navigateur indique hors ligne, l'événement est exécuté. |
| en ligne | Lorsque le réseau disponible dans le navigateur, puis l'événement exécuté. |
| onpagehide | Cette action de script, si l'utilisateur ne travaillant pas sur une page Web en cours, la page en cours peut être masquée. |
| onpageshow | Ce script agit à ce moment-là, la page Web actuelle est chargée. |
| onpopstate | Ce script fonctionne automatiquement sur le navigateur pour un changement d'état de l'historique. |
| redimensionner | Ce script agit lorsque le navigateur de la fenêtre change de taille. |
| onstorage | Lorsque le stockage Web des utilisateurs est mis à jour, l'événement est exécuté. |
| onunload | Soit la page Web actuelle de l'utilisateur n'est pas chargée, soit la fenêtre est fermée, puis l'événement est exécuté. |
2. Attributs d'événement de formulaire
| Attribut | La description |
| le flou | Certains objets de validation de formulaire relâchent le focus, puis l'événement est déclenché. |
| sur le changement | Le changement de valeur dans le formulaire puis l'événement s'est déclenché. |
| onfocus | Dans le formulaire, l'objet a le focus. Travailler sur cet objet puis l'événement s'est déclenché. |
| en entrée | L'utilisateur donne une entrée de valeur dans le formulaire puis cet événement est déclenché. |
| non valide | L'événement fonctionne lorsque l'élément ne satisfait pas à ses contraintes prédéfinies. |
| onreset | L'utilisateur a réinitialisé les informations du formulaire, puis l'événement a été déclenché. |
| onsearch | Les utilisateurs recherchent le champ requis puis l'événement est déclenché. |
| onselect | L'utilisateur sélectionne le texte ou la zone de texte sous forme puis l'événement est déclenché. |
| onsubmit | L'utilisateur soumet le formulaire à la fin puis l'événement se déclenche. |
3. Attributs d'événement du clavier
| Attribut | La description |
| onkeydown | À l'aide d'un clavier, l'utilisateur appuie sur la touche vers le bas à ce moment où l'événement fonctionne |
| onkeypress | À l'aide du clavier, les utilisateurs appuient sur la touche et affichent les caractères à ce moment où l'événement fonctionne. |
| onkeyup | Après la presse, l'utilisateur clé relâche la clé puis l'événement fonctionne. |
4. Attributs d'événements de souris
| Attribut | La description |
| sur clic | L'utilisateur clique avec la souris sur le bouton puis un événement s'est produit. |
| ondblclick | Les utilisateurs cliquent deux fois sur la souris, puis l'événement s'est produit. |
| onmousedown | L'utilisateur appuie sur le bouton de la souris sur l'élément puis l'événement s'est produit. |
| onmousemove | L'utilisateur déplace le pointeur de la souris sur l'élément, puis l'événement s'est produit. |
| onmouseout | L'utilisateur déplace la souris à l'extérieur de l'élément, puis l'événement s'est produit. |
| onmouseover | L'utilisateur déplace la souris sur l'élément puis l'événement s'est produit. |
| onmouseup | L'utilisateur a relâché le bouton de la souris puis l'événement s'est produit. |
| onmousewheel | À l'aide de la molette de la souris, l'utilisateur fait rouler l'élément de haut en bas, puis l'événement s'est produit. |
| onwheel | À l'aide d'une molette de souris, faites-les rouler de haut en bas, puis l'événement s'est produit. |
5. Attributs d'événement du presse-papiers
| Attribut | La description |
| oncopie | En utilisant des utilisateurs de souris pour copier le contenu, l'événement s'est produit. |
| oncut | À l'aide de souris, les utilisateurs ont coupé le contenu, puis l'événement s'est produit. |
| onpaste | À l'aide de l'utilisateur de la souris, collez le contenu, puis l'événement s'est produit. |
6. Attributs d'événement multimédia
| Attribut | La description |
| onabort | Lorsque les fichiers multimédias sont abandonnés pour être téléchargés et lus à nouveau, un événement se produit. |
| oncanplay | Lorsqu'un fichier multimédia est prêt à être lu, ce déclencheur est déclenché. |
| oncanplaythrough | Fichier multimédia prêt à jouer sans mise en mémoire tampon ni chargement. |
| oncuechange | L'élément modifie le signal de l'événement déclenché. |
| ondurationchange | Le fichier multimédia modifie la durée, puis le déclencheur est déclenché. |
| onemptied | Si le fichier multimédia n'est pas disponible et entraîne une erreur fatale, le déclencheur est déclenché. |
| interrompu | Le fichier multimédia arrive sur le noeud final, puis le déclencheur est déclenché. |
| onerror | Lorsqu'une erreur s'est produite pour obtenir le fichier multimédia, le déclencheur est déclenché |
| onloadeddata | Le fichier multimédia charge les données puis le déclencheur est déclenché. |
| onloadedmetadata | Le fichier multimédia charge les métadonnées, puis le déclencheur est déclenché. |
| onloadstart | Le fichier multimédia commence à se charger, puis le déclencheur est déclenché. |
| onpause | Le fichier multimédia est en pause de lecture, puis le déclencheur est déclenché. |
| onplay | Le fichier multimédia est prêt à être lu, puis le déclencheur est déclenché. |
| onplaying | Le fichier multimédia commence à jouer, puis le déclencheur est déclenché. |
| onprogress | Ce script agit lorsque le navigateur travaille à se connecter avec les données multimédias. |
| onratechange | Si la vitesse de lecture des vidéos est modifiée, le déclencheur est déclenché. |
| recherché | Les utilisateurs ont terminé le déplacement, sinon sautez la nouvelle position de la vidéo. cet attribut est défini sur false. |
| cherchant | L'utilisateur veut se déplacer sinon sauter la nouvelle position de la vidéo. cet attribut est défini sur true. |
| installé | Lorsque le navigateur s'arrête soudainement à la connexion des données, l'événement fonctionne. |
| suspendre | Lorsque le navigateur Web, à dessein, n'obtient pas de données multimédias, les événements fonctionnent. |
| ontimeupdate | Lorsqu'un utilisateur modifie la position de lecture vidéo comme vers l'avant et vers l'arrière. |
| onvolumechange | Pour changer le volume du média de faible à élevé. |
| en attente | Si les données chargent les informations, la vidéo en cours s'arrête avec mise en mémoire tampon, puis l'événement fonctionne. |
Conclusion
Les événements HTML sont un moyen facile de prendre des mesures et d'interfacer entre les navigateurs Web et les utilisateurs. Les utilisateurs peuvent obtenir la réaction de chaque action sans effort. Par exemple; couper et copier pour le presse-papiers, déplacer et cliquer pour la souris, les boutons pour la forme. Les événements créent des applications Web en temps réel et créent des systèmes de travail intelligents.
Articles recommandés
Ceci est un guide des événements HTML. Nous discutons ici de l'introduction et des types d'événements HTML tels que les fenêtres, le formulaire, le clavier et bien d'autres ainsi que l'explication des attributs en détail. Vous pouvez également consulter les articles suivants pour en savoir plus-
- Balises HTML de base
- Avantages du HTML
- Balises au format HTML
- Feuilles de style HTML
- Blocs HTML
- 5 principaux attributs d'événements HTML avec des exemples
- Définir une couleur d'arrière-plan en HTML avec l'exemple
- Guide des différents événements JavaScript
- Validation de formulaire HTML | Exemples