Écouteur D’Événement Javascript

exp | find | iat | JavaScript | mean | sin

Michael Zippo 04.11.2021

L`ajout de fonctionnalités interactives à un site Web est l`endroit où JavaScript brille. Alors que HTML et CSS sont utilisés respectivement pour définir la structure et les styles d`une page Web, vous pouvez utiliser JavaScript pour rendre votre site plus dynamique.

En JavaScript, les événements sont utilisés pour créer un site interactif . Dans ce guide, nous parlerons des événements JavaScript. Nous explorerons où les événements peuvent être utilisés, comment définir un événement et comment appeler un événement. C`est parti !

Qu`est-ce qu`un événement JavaScript ?

Les événements peuvent être déclenchés par le navigateur ou par l`utilisateur et peuvent modifier l`état de la page Web. Lorsque vous cliquez sur un bouton sur une page Web, un événement JavaScript est créé. Lorsque vous cliquez sur un menu déroulant en expansion, un événement JavaScript est utilisé.

Les événements JavaScript ont un large éventail d`utilisations, notamment :

Vérifier si un formulaire a été rempli
Déplacer un utilisateur vers une autre page après avoir rempli un formulaire
Rendre les menus déroulants interactifs
Autoriser un utilisateur à effectuer un zoom avant et arrière sur les images

Pour travailler avec des événements en JavaScript, vous devez connaître deux concepts : les gestionnaires d`événements et les écouteurs d`événements.

Un gestionnaire d`événements est une fonction qui est exécutée lorsqu`un événement est déclenché sur une page Web. Les écouteurs d`événements attachent une fonction d`événement à un élément HTML, de sorte que lorsque cette fonction est exécutée, l`élément Web est modifié.

Les gestionnaires d`événements peuvent être définis de trois manières : à l`aide d`un gestionnaire d`événements en ligne, un événement ou un écouteur d`événement.

Gestionnaires d`événements en ligne

Le moyen le plus simple de démarrer avec les événements en JavaScript est d`utiliser un gestionnaire d`événements en ligne. Cela signifie que vous définirez votre événement dans votre fichier HTML.

Pour cet exemple, supposons que nous soyons la conception d`un site Web pour une boulangerie appelée JJ Smith`s Bakery. Nous voulons qu`un utilisateur soit invité à saisir le texte « Réponse reçue » lors de la soumission d`un formulaire.

Considérez le code suivant :

Ce code affiche une page Web qui ressemble à ceci :

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

notre bouton fonctionne de la même comme avant, mais notre code est écrit d`une manière différente. Au lieu d`écrire nos gestionnaires d`événements en ligne, nous les avons déplacés vers notre fichier main.js. Cela nous aide à écrire un code plus gérable car nous n`avons pas besoin de lire tout notre code HTML pour savoir où nos événements en ligne sont déclenchés.

Event Listener

Les événements peuvent être utilisés pour déclarer un événement en JavaScript. vérifiez toujours quand l`état d`un élément i est modifié, et si cet élément est modifié, le code dans l`écouteur sera exécuté.

Par exemple, lorsque vous cliquez sur un bouton qui est connecté à un écouteur d`événement, l`écouteur "entend" qu`un événement de souris a été déclenché. Il exécutera ensuite le code que vous avez associé à cet écouteur d`événement particulier.

Notre code HTML pour cet exemple est le même que ci-dessus, mais nous apporterons une petite modification à notre " main. js " fichier :

Dans ce code, nous utilisons addEventListener pour créer un écouteur d`événement. Ceci au lieu de lier notre fonction JavaScript submitForm () à un événement onclick comme nous l`avons fait dans nos deux derniers exemples.

Nous spécifions "click" pour indiquer à notre code d`écouter lorsque notre bouton est cliqué avec le pointeur de la souris. Il existe d`autres types d`événements en plus de l`événement de clic, tels que les événements de clavier, mais dans ce didacticiel, nous nous concentrerons sur l`événement de clic de souris.

Le résultat est le même que celui que nous avons vu dans nos deux derniers exemples, mais cette fois, nous utilisons un écouteur d`événements HTML. Les écouteurs d`événements sont le moyen le plus récent de déclarer des événements en JavaScript et sont peut-être la méthode la plus couramment utilisée.

Conclusion

Les événements JavaScript vous permettent de rendre votre page Web interactive. Un événement peut être déclenché lorsque vous appuyez sur un bouton, soumettez un formulaire ou survolez du texte. Il existe trois façons de déclarer un événement en JavaScript : en ligne, à l`aide d`un ou en utilisant un écouteur.

Vous êtes maintenant prêt à commencer à créer des événements JavaScript comme un développeur web professionnel !

edX: IBM course	Codecademy: Machine Learning	Guvi: Data visualisation in Python

-10%	FREE	-5%

Écouteur D’Événement Javascript

Qu`est-ce qu`un événement JavaScript ?

Gestionnaires d`événements en ligne

Événements avec propriétés de gestionnaire

Event Listener

Conclusion