Quels sont les événements JavaScript
Vous roulez dans une voiture et un signal vient, c'est rouge, vous vous arrêtez. Lorsque le signal devient vert, vous recommencez à conduire. Vos actions étaient basées sur un signal qui vous a été fourni. Il en va de même pour les événements. Lorsque vous programmation, vous voulez que certaines actions soient effectuées en cliquant sur un bouton ou en appuyant sur une touche. Le clic sur le bouton ou la suppression d'une touche génère un événement. Sur la base de cet événement, une action est effectuée. Par exemple, il y a un article et un bouton qui se lit "montre plus". Lorsque vous cliquez sur ce bouton, tout l'article devient visible
Dans cet article, nous allons discuter de tout sur les événements avec des exemples.
Qu'est-ce qu'un événement
Pour le dire simplement, un événement est une action effectuée par un utilisateur ou initiée par le navigateur. JavaScript répond / réagit à cette action; Cette réaction / réponse à l'événement est appelée gestion des événements. La gestion des événements n'est qu'un morceau de code écrit par le développeur. Ce morceau de code s'exécute lorsque l'événement est déclenché. Les gestionnaires d'événements sont également appelés auditeurs d'événements. Les événements sont tirés dans la fenêtre du navigateur et sont liés ou attachés à un seul ou un ensemble d'éléments. Les événements sont de nombreux types différents. Certains d'entre eux sont:
- L'utilisateur appuie sur une touche du clavier
- L'utilisateur plane sur un élément
- L'utilisateur clique sur un élément via la souris
- L'utilisateur ferme le navigateur
- L'utilisateur redimensionne le navigateur
- La page Web se charge ou a terminé le chargement
- Lorsqu'une erreur se produit
- L'utilisateur soumet un formulaire
Événements JavaScript
Javascrip nous offre un tas d'événements. Il est impossible de les répertorier et de les expliquer tous dans un article. Ici, je ne ferai que les plus courants:
Événements d'entrée
- blueur
- changement
- se concentrer
- Keyup / Keydown
- appuyez sur la touche
Événements de souris
- Souris
- Souris
- MousEdown / Mouseup
Cliquez sur les événements
- Cliquez sur
- Dblclick
Chargez les événements
- charger
- décharger
- erreur
- Redimensionner
Maintenant que nous avons discuté de la théorie, allons-nous dans le praticité et discutons de quelques exemples de la vie réelle d'événements JavaScript. Supposons que j'ai un bouton et lorsque je clique sur ce bouton, je veux qu'une alerte soit affichée à l'utilisateur. Le clic sur le bouton déclenche l'événement, puis un bloc de code gérera l'événement et réagira en affichant une alerte.
Ceci est un bouton simple dans un fichier html. Maintenant, nous allons obtenir le bouton via le nom de la classe et ensuite gérerons l'événement i-e cliquez.
const btn = document.queySelector (".ClickMe ");btn.addEventListener ('click', function ()
alert ("vous avez cliqué sur le bouton");
);
Mettez ce code dans une balise de script ou faites un autre fichier avec une extension JS et mettez-le là.
Maintenant, lorsque nous cliquez sur le bouton, une alerte sera affichée:
Il existe également d'autres façons de l'implémenter, par exemple:
const btn = document.queySelector (".ClickMe ");btn.onClick = function ()
alert ("vous avez cliqué sur le bouton");
;
Ou:
const btn = document.queySelector (".ClickMe ");fonction cliquée ()
alert ("vous avez cliqué sur le bouton");
;
btn.onClick = ClickEdMe;
Le fichier html i-e le bouton reste le même.
Note: Vous pouvez mettre votre code JavaScript dans une balise de script, puis exécuter votre fichier HTML dans le navigateur à l'aide d'un serveur en direct ou créer un fichier différent avec une extension JS et le référer à l'intérieur de l'en-tête du fichier HTML.
Voyons maintenant un autre exemple: Supposons que nous ayons un formulaire d'inscription. Dans la forme, nous avons deux champs d'entrée et nous voulons mettre la validation. Si l'utilisateur soumet le formulaire, nous voulons vérifier si l'utilisateur a rempli les deux entrées ou l'a laissé vide. Si les deux ou l'un d'eux sont vides, nous montrons une alerte que le champ est vide. Sinon, nous montrons une alerte qui indique que l'utilisateur s'est inscrit:
Lorsque nous avons quitté le champ de mot de passe vide et cliqué sur le registre, un événement a déclenché I-E soumettre. Mais sur la base de notre gestionnaire, le champ de saisie "Mot de passe"Était vide d'où un message"Veuillez remplir les champs requis" est montré.
Lorsque nous avons rempli les deux champs et cliqué sur le bouton Registre, "Inscrit" a été montré.
Conclusion
Les événements et la gestion des événements sont des concepts vraiment importants de JavaScript. Lorsqu'un utilisateur interagit avec une page Web, un événement est déclenché. JavaScript fournit des gestionnaires d'événements pour répondre à ces événements et rendre les pages Web plus interactives tout en offrant une expérience utilisateur immersive. Dans ces gestionnaires d'événements, nous pouvons mettre notre propre code et logique et faire quelque chose de beau.
Dans cet article, nous avons brièvement discuté de ce que sont les événements JavaScript et comment nous pouvons les gérer; Ensuite, nous sommes passés aux types d'événements et de gestionnaires d'événements et de leurs applications de la vie réelle.