Change language
Python.Engineering Wiki Écouteur D’Événement Javascript

Écouteur D’Événement Javascript

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo 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 :

submitForm () est appelé. Ceci est programmé pour se produire lorsque l`utilisateur clique sur notre bouton.

Lorsque nous cliquons sur notre bouton, ce qui suit se produit :

Comme vous pouvez le voir, notre message apparaît. Nous avons utilisé un gestionnaire d`événements en ligne pour rendre notre page Web interactive. Mais les gestionnaires d`événements en ligne ne sont pas le seul moyen d`utiliser des événements en JavaScript. Voyons comment utiliser la propriété de gestionnaire d`événements dans notre code.

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

Dans un gestionnaire en ligne, vous devez spécifier la fonction que vous souhaitez exécuter dans votre fichier HTML . Dans notre code HTML précédent, cette ligne est l`endroit où nous avons défini la fonction que nous voulions appeler lorsque notre bouton était pressé :

En utilisant les propriétés du gestionnaire, nous pouvons supprimer la commande de l`événement "onclick" de notre code. Cela nous permet de déplacer tout le JavaScript qui rend notre page Web interactive dans son propre fichier. Pour cet exemple, nous allons donner à notre bouton l`identifiant "bouton", afin que nous puissions identifier notre bouton dans le code JavaScript. Nous supprimons l`événement onclick et attribuons un identifiant à notre bouton :

Pour déclencher notre événement lorsque le bouton est pressé, nous allons écrire un événement avec une propriété de gestionnaire à l`intérieur de notre "main". js " . Voici le code que nous allons utiliser :

Lorsque vous exécutez ce code et cliquez sur le bouton, le message suivant est renvoyé :

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.

Exécutons à nouveau le code et cliquez sur le bouton.

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 !