Manipatives d'événements JavaScript
En JavaScript, un événement est une action qui se produit sur une page Web à l'intérieur du navigateur. Cette action peut taper un champ, cliquer sur un bouton ou charger une page. Les actions peuvent être initiées par le navigateur ou l'utilisateur; Lorsqu'une action se produit sur une page Web, le navigateur informe le système qu'un événement s'est produit. Les développeurs peuvent ensuite répondre à ces événements en écrivant des fonctions qui sont appelées gestionnaires d'événements.Les gestionnaires d'événements sont des fonctions qui écoutent un type d'événement spécifique et lorsque cet événement se produit, ils exécutent un bloc de code.
Qu'est-ce que la manipulation des événements
Un événement est déclenché chaque fois qu'un utilisateur interagit avec une page Web. Cet événement peut être n'importe quoi d'un utilisateur cliquant sur la page pour charger une page Web.
Chaque fois qu'un événement se produit sur une page Web, le navigateur informe le système; Fonctions spécifiques du gestionnaire d'événements Écoutez leurs événements respectifs et lorsque ces événements sont déclenchés, ils exécutent le bloc de code écrit en eux. Le code écrit à l'intérieur de la fonction contient toutes les actions qui doivent être effectuées en réponse à l'événement.
Dans cet article, nous aurons une discussion détaillée sur différents types d'événements en JavaScript et comment gérer ces événements.
Note: J'utiliserai la console pour démontrer les exemples présents dans cet article.
Quels sont les différents types d'événements?
Certains des événements les plus courants qui se produisent en JavaScript sont:
Événements de souris:
- sur clic
- souris vers le bas
- souris
- mousemove
Événements de clavier:
- touche Bas
- Keyup
Former des événements:
- onfocus
- le flou
Événements de fenêtre:
- en charge
- onerror
La liste de tous les événements qui se produisent en JavaScript est énorme; Nous ne discuterons que des événements les plus courants et les plus utilisés.
Comment utiliser l'événement de clic dans JavaScript
Le sur clic() Le gestionnaire d'événements est utilisé pour écouter les événements de clic sur une page Web. Chaque fois que l'utilisateur clique sur un élément HTML sur une page Web, son respectif sur clic() Le gestionnaire d'événements est déclenché.
Voyons maintenant un exemple pour avoir une compréhension claire du gestionnaire d'événements de clic:
Nous avons une page Web avec deux boutons I.e. Bouton 1 et bouton 2:
Si nous cliquons sur l'un de ces boutons, leur sur clic() Le gestionnaire d'événements est déclenché qui imprime un message sur la console.
Comment utiliser l'événement Focus en JavaScript
Le onfocus () L'événement est déclenché lorsqu'un élément devient ou perd Focus:
Par exemple, dans l'extrait de code indiqué ci-dessous, le "FocUsevent ()" la méthode est appelée sur le onfocus () événement dans le saisir étiqueter:
Html
Tapez quelque chose ici
Javascrip
functionfoCUsevent ()document.getElementByid ("input1").style.fond = "vert";
Comment utiliser l'événement Keydown en javascript
Le onkeydown () L'événement est déclenché lorsqu'une touche est appuyée par l'utilisateur:
Par exemple, dans le code suivant, le "KeyDowevent ()" La fonction est appelée sur le "Onkeydown" événement, et le message d'alerte est affiché dans la définition de la fonction:
Html
Tapez quelque chose ici
Javascrip
fonction keydownvent ()document.getElementById ("Input1");
alert ("appuyé sur une touche");
Comment utiliser l'événement de chargement en javascript
Le en charge() L'événement est déclenché juste après que la page Web a été chargée avec succès.
Par exemple, dans l'extrait de code ci-dessous, un simple message d'alerte s'affiche sur le en charge() événement dans le corps étiqueter:
Événements JavaScript
Conclusion
Les événements sont très importants pour rendre une page Web interactive et réactive. Un événement peut être lancé par le navigateur ou l'utilisateur. Lorsqu'un utilisateur interagit avec les éléments HTML d'une page Web, un événement est déclenché. JavaScript nous donne une option pour répondre à ces déclencheurs en utilisant des gestionnaires d'événements. Dans ce guide pratiques, nous avons appris à utiliser les gestionnaires d'événements pour répondre aux événements et rendre les pages Web plus réactives.