De nombreuses applications Web reposent sur une forme d'événement pour exécuter leurs fonctions. À un moment donné, un humain interagit avec son interface, ce qui génère un événement. Ces événements déclenchés par l'homme reposent généralement sur un périphérique, tel qu'une souris ou un clavier.

Lorsqu'un appareil crée un événement, le programme peut l'écouter, pour savoir quand exécuter un comportement spécifique. Dans ce didacticiel, vous apprendrez à écouter les événements à l'aide de JavaScript.

Qu'est-ce que la programmation événementielle ?

La programmation événementielle est le nom d'un paradigme qui repose sur l'exécution d'un événement pour remplir ses fonctions. Il est possible de créer un programme événementiel dans n'importe quel langage de programmation de haut niveau. Mais la programmation événementielle est plus courante dans des langages comme JavaScript qui s'intègrent à une interface utilisateur.

Qu'est-ce qu'un écouteur d'événement ?

Un écouteur d'événement est une fonction qui lance un processus prédéfini si un événement spécifique se produit. Ainsi, un écouteur d'événement « écoute » une action, puis appelle une fonction qui exécute une tâche connexe. Cet événement peut prendre plusieurs formes. Les exemples courants incluent les événements de souris, les événements de clavier et les événements de fenêtre.

Création d'un écouteur d'événement à l'aide de JavaScript

Vous pouvez écouter les événements sur n'importe quel élément dans le DOM. JavaScript a un addEventListener() fonction que vous pouvez appeler sur n'importe quel élément d'une page Web. le addEventListener() la fonction est une méthode de Cible de l'événement interface. Tous les objets qui prennent en charge les événements implémentent cette interface. Cela inclut la fenêtre, le document et les éléments individuels sur la page.

La fonction addEventListener() a la structure de base suivante :

element.addEventListener("événement", functionToExecute);

Où:

• la élément peut représenter n'importe quelle balise HTML (d'un bouton à un paragraphe)
• la "un événement" est une chaîne désignant une action spécifique et reconnue
• la fonctionPourExécuter est une référence à une fonction existante

Créons la page Web suivante qui contient quelques éléments HTML :

Bienvenue


 Bonjour, bienvenue sur mon site.


Apprendre encore plus





informations utilisateur

Nom d'utilisateur: 

Soumettre

Le code HTML ci-dessus crée une page simple qui renvoie à un fichier JavaScript appelé app.js. le app.js contiendra le code pour configurer les écouteurs d'événement. Ainsi, si vous souhaitez lancer un processus spécifique chaque fois qu'un utilisateur clique sur le premier bouton de la page Web, c'est le fichier dans lequel le créer.

Le fichier app.js

document.querySelector('.btn').addEventListener("click", clickDemo)
fonction clickDemo(){
 console.log("Bonjour")
}

Le code JavaScript ci-dessus accède au premier bouton de la page en utilisant le sélecteur de requête() une fonction. Il ajoute ensuite un écouteur d'événement à cet élément en utilisant le addEventListener() méthode. L'événement spécifique qu'il écoute porte le nom de « clic ». Lorsque le bouton déclenche cet événement, l'auditeur appellera le clickDemo() une fonction.

En rapport: Apprenez à utiliser les sélecteurs DOM

le clickDemo() La fonction affiche « Bonjour » sur la console du navigateur. Chaque fois que vous cliquez sur le bouton, vous devriez voir cette sortie dans votre console.

La sortie d'événement « clic »

Que sont les événements de souris ?

JavaScript a un Evénement Souris interface qui représente les événements qui se produisent en raison de l'interaction d'un utilisateur avec sa souris. Plusieurs événements utilisent le Evénement Souris interface. Ces événements comprennent les suivants :

• Cliquez sur
• dblclick
• mouvement de la souris
• survol de la souris
• souris
• lever la souris
• souris vers le bas

le Cliquez sur L'événement se produit lorsqu'un utilisateur appuie sur un bouton de la souris et le relâche alors que son pointeur se trouve sur un élément. C'est exactement ce qui s'est passé dans l'exemple précédent. Comme vous pouvez le voir dans la liste ci-dessus, les événements de souris peuvent prendre plusieurs formes.

Un autre événement de souris courant est dblclick, qui signifie double-clic. Cela se déclenche lorsqu'un utilisateur clique deux fois rapidement sur un bouton de la souris. Une chose remarquable à propos de la addEventListener() est que vous pouvez l'utiliser pour affecter plusieurs écouteurs d'événement à un seul élément.

Ajout d'un événement dblclick au premier bouton

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
fonction dblclickDemo(){
 alert("Ceci est une démonstration de la façon de créer un événement double-clic")
}

L'ajout du code ci-dessus au fichier app.js créera effectivement un deuxième écouteur d'événement pour le premier bouton de la page Web. Ainsi, cliquer deux fois sur le premier bouton créera l'alerte suivante dans le navigateur :

Dans l'image ci-dessus, vous verrez l'alerte qui est générée, et vous verrez également que deux autres sorties "Bonjour" sont dans la console. En effet, un événement de double-clic est une combinaison de deux événements de clic et il existe des écouteurs d'événement pour les deux Cliquez sur et le dblclick événements.

Les noms des autres événements de souris dans la liste décrivent leur comportement. le mouvement de la souris L'événement se produit chaque fois qu'un utilisateur déplace sa souris lorsque le curseur est sur un élément. le lever la souris L'événement se produit lorsqu'un utilisateur maintient un bouton enfoncé sur un élément, puis le relâche.

Que sont les événements de clavier ?

JavaScript a un Événement de clavier interface. Cela écoute les interactions entre un utilisateur et son clavier. Dans le passé, Événement de clavier avait trois types d'événements. Cependant, JavaScript a depuis déprécié le appuyez sur la touche un événement.

Alors le touche et touche Bas les événements sont les deux seuls événements clavier recommandés, qui sont tout ce dont vous avez besoin. le touche Bas l'événement se produit lorsqu'un utilisateur appuie sur une touche et que le touche l'événement se produit lorsqu'un utilisateur le libère.

En reprenant l'exemple HTML ci-dessus, le meilleur endroit pour ajouter un écouteur d'événement de clavier est sur le saisir élément.

Ajout d'un écouteur d'événement de clavier au fichier app.js

let salutations = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
fonction captureInput (e){
 salutations.innerText = (`Bonjour ${e.target.value}, bienvenue sur mon site Web.`)
}

Le code ci-dessus utilise le sélecteur de requête() fonction pour accéder au paragraphe et saisir éléments sur la page. Il appelle alors le addEventListener() méthode sur le saisir élément, qui écoute le touche un événement. Chaque fois qu'un touche l'événement se produit, le captureInput() La fonction prend la valeur clé et l'ajoute au paragraphe de la page. le e Le paramètre représente l'événement, que JavaScript attribue automatiquement. Cet objet événement a une propriété, target, qui est une référence à l'élément avec lequel l'utilisateur a interagi.

Dans cet exemple, l'étiquette apposée sur le saisir le champ demande un nom d'utilisateur. Si vous saisissez votre nom dans le champ de saisie, la page Web ressemblera à ceci :

Le paragraphe contient maintenant la valeur d'entrée qui, dans l'exemple ci-dessus, est « Jane Doe ».

addEventListener capture toutes sortes d'interactions utilisateur

Cet article vous a présenté le addEventListener() méthode, ainsi que plusieurs événements de souris et de clavier que vous pouvez utiliser avec. À ce stade, vous savez comment écouter un événement particulier et comment créer une fonction qui y répond.

le addEventListener fournit des capacités supplémentaires, cependant, via son troisième paramètre. Vous pouvez l'utiliser pour contrôler la propagation des événements: l'ordre dans lequel les événements se déplacent des éléments vers leurs parents ou leurs enfants.

Comprendre la propagation d'événements en JavaScript

Les événements sont une puissante fonctionnalité JavaScript. Comprendre comment un navigateur Web les élève contre des éléments est essentiel pour maîtriser leur utilisation.

Lire la suite

A propos de l'auteur