Événements en JavaScript | Expliqué avec des exemples
JavaScript est connu pour donner à une page Web la possibilité de «penser et d'agir», ce qui est possible en raison d'événements. Les événements agissent comme des déclencheurs qui incitent les scripts backend à effectuer des actions. Ils peuvent être facilement appelés "choses" Cela se produit sur une page Web, ces événements peuvent être n'importe quoi: charger une page Web, cliquer sur un bouton HTML ou planer la souris sur un élément HTML spécifique.
Il y a des 10 milliards d'événements qui peuvent déclencher JavaScript, nous avons des événements pour déclencher une fonction sur le clic de souris ou sur le plan de la souris, mais nous allons couvrir le travail avec des événements et JavaScript.
Un exemple simple d'un événement JavaScript en cours d'exécution sur une pression sur un bouton est illustré ci-dessous:
Gestionnaires d'événements
Les événements sont gérés par des gestionnaires d'événements; HTML offre la capacité d'ajouter différents types de gestionnaires d'événements sur ses éléments, ces gestionnaires d'événements permettent au programmeur d'exécuter du code JavaScript en exécutant une fonction.
Il existe 3 types de gestionnaires d'événements:
- Auditeur Dom-on-Event
- Auditeur en ligne
- Méthode addEventListener ()
L'auditeur Dom en événement
Nous pouvons utiliser des auditeurs d'événements sur les propriétés DOM, comme déclencher un événement sur le chargement complet de la page Web. Ces auditeurs d'événements peuvent également être ajoutés aux éléments HTML, mais la restriction étant un auditeur d'événements pour chaque élément HTML.
Par exemple, nous voulons alerter l'utilisateur sur le chargement complet de la page Web, nous pouvons le faire en accédant à l'objet de fenêtre du DOM:
Après avoir exécuté le fichier HTML, vous verrez la sortie suivante:
Comme vous pouvez le voir, après avoir complètement chargé la page Web, le JavaScript alerte l'utilisateur que la page Web a chargé.
Note: L'objet Window est utilisé pour travailler sur des événements mondiaux.
L'auditeur en ligne d'événements
L'une des méthodes triviales lorsque vous travaillez avec HTML et JavaScript est d'utiliser les auditeurs d'événements en ligne, nous le faisons en ajoutant l'auditeur d'événements comme attribut de l'élément à l'intérieur de sa balise.
Par exemple, dans l'exemple ci-dessus, nous avons ajouté un "sur clic()" Événement à l'intérieur de l'élément bouton, lorsque nous utilisons l'écouteur d'événement en ligne, nous le définissons égaux à une fonction qui sera invoquée lorsque l'événement est déclenché.
Comme tu peux le voir, btnclicked () est la fonction qui sera exécutée sur un bouton cliquer.
Si nous voulons imprimer la chaîne pour consoler «vous avez appuyé sur le bouton», nous pouvons le faire en écrivant le btnclicked () fonction comme ceci:
Lorsque vous exécutez le fichier HTML, vous obtenez la sortie suivante.
Utilisation d'AdveventListener ()
Le troisième gestionnaire d'événements est ajouté à l'aide de la méthode ADDEVENTListener (), il s'agit de la manière nouvelle et la plus utilisée de gérer les événements en JavaScript; Pour le montrer, nous allons créer une div dans HTML en utilisant les lignes de code suivantes:
Exemple addeventListener ()
Pour ajouter un auditeur d'événements à ce sujet div Vous allez utiliser l'extrait de script suivant:
Si vous regardez attentivement l'extrait de script, vous remarquerez que nous ajoutons 3 écouteurs d'événements différents sur cette div, une lorsque le curseur entre dans la div, deuxième lorsque le curseur quitte le div et le dernier lorsque le curseur clique sur le div; Après avoir écrit tout ce code, enregistrez-le, rechargez la page et vous obtiendrez la sortie suivante:
Comme vous pouvez le voir dans la console, nos gestionnaires d'événements fonctionnent et le code JavaScript est en cours d'exécution.
C'est tout pour les événements en javascript
Conclusion
Les événements en JavaScript sont la présence de tels cas qui incitent le JavaScript à effectuer une certaine manipulation sur les éléments HTML ou à effectuer des fonctionnalités back-end. L'événement en JavaScript est utilisé pour donner à la page Web HTML la capacité de penser et d'effectuer des actions, ces événements peuvent être tout ce qu'un utilisateur fait: cliquer sur un bouton, appuyer sur une touche spécifique ou un mouvement de souris spécifique. Il existe également des événements mondiaux qui peuvent être accessibles à l'aide de l'objet Window, comme la fenêtre.charger(). Nous avons appris divers types de gestionnaires d'événements ainsi que leurs exemples.