Qu'est-ce qu'un écouteur d'événements ?
Un écouteur d'événements est une fonction de JavaScript qui attend qu'un événement se produise, puis y répond. JavaScript est un langage de programmation utilisé par les développeurs pour concevoir des sites web interactifs. La fonction d'écouteur d'événements de JavaScript vous permet de créer des réponses personnalisées à des événements tels que les clics de souris, les clics de clavier et le redimensionnement des fenêtres. Le paradigme de programmation qui consiste à attendre et à répondre à des événements en temps réel est appelé gestion des événements.
Quelle est la syntaxe de la fonction d'écouteur d'événements ?
La fonction d'écouteur d'événements partage des caractéristiques similaires à d'autres fonctions JavaScript. Lorsqu'elle est activée, elle prend les mesures nécessaires pour traiter l'événement. Par exemple, la fonction d'écouteur d'événements peut modifier le texte affiché, collecter des informations à partir de formulaires d'inscription ou stocker des données dans des bases de données.
Syntaxe d'écouteur d'événements
Une fonction d'écouteur d'événements suit la syntaxe JavaScript appropriée, comme dans l'exemple suivant.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "survenue de MouseClick" ;
}
Cet exemple montre la fonction d'écouteur d'événements RespondMouseClick. Il est courant d'écrire le nom de la fonction pour refléter l'objectif de l'écouteur d'événements. Dans la fonction, vous rédigez des codes pour effectuer des actions spécifiques lorsque l'événement se produit. Dans cet exemple, la fonction ajoute le texte survenue de MouseClick à l'élément HTML textdisplay1.
Syntaxe du gestionnaire d'événements
Vous pouvez également utiliser une fonction de gestionnaire d'événements pour répondre à l'événement activé, comme dans l'exemple suivant.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Cela vous permet de gérer plusieurs types d'événements à partir d'un élément spécifique avec une seule fonction.
Par exemple, vous pouvez enregistrer un écouteur d'événements pour gérer tous les types d'événements de blockchain sur des applications basées sur des événements. Pour plus d'informations, découvrez comment créer une application basée sur des événements avec Amazon Managed Blockchain.
Comment ajouter un écouteur d'événements ?
Un écouteur d'événements ne sera activé qu'une fois que vous l'aurez ajouté à l'élément JavaScript correspondant. Pour ce faire, vous pouvez utiliser la syntaxe suivante :
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Par exemple, les développeurs peuvent appeler la fonction suivante pour lier l'écouteur d'événements de clic à un élément bouton.
btn.addEventListener("click", RespondMouseClick);
Vous pouvez également ajouter plusieurs écouteurs d'événements à un objet d'événement spécifique sans remplacer les gestionnaires d'événements existants.
Par exemple, Amazon Web Services (AWS) permet aux développeurs d'attacher plusieurs rappels à l'objet AWS.Request. Pour plus d'informations, découvrez comment utiliser un écouteur d'événements d'objet de requête sur AWS.
Paramètres d'ajout d'événements
Voici une explication des paramètres de la syntaxe précédente :
- Le paramètre event correspond à tout événement JavaScript valide, tel qu'un clic, une modification, un survol de la souris, une touche enfoncée et un chargement.
- Le paramètre listener est le rappel d'événement ou la fonction JavaScript créés pour répondre à des événements spécifiques.
- Le paramètre useCapture est un paramètre facultatif qui indique le mode de propagation des événements. Il accepte les valeurs booléennes, où true active la capture alors que false active le bouillonnement. La valeur par défaut de ce paramètre est définie sur false.
- Le paramètre options comprend plusieurs valeurs facultatives, notamment le mode de capture et les signaux de rejet, qui représentent les comportements de l'écouteur.
Comment supprimer un écouteur d'événements ?
Les écouteurs d'événements restent actifs jusqu'à ce que vous les supprimiez des éléments JavaScript associés. Pour ce faire, vous pouvez utiliser la syntaxe suivante.
element.removeEventListener(type, listener, useCapture);
Les paramètres de suppression des écouteurs d'événements sont similaires à ceux que vous utilisez pour ajouter des écouteurs d'événements. Lorsque vous supprimez un écouteur d'événements, vous devez spécifier les mêmes paramètres type, listener et useCapture. Dans le cas contraire, l'écouteur d'événements restera actif et continuera de se déclencher pour les événements futurs.
Par exemple, vous pouvez ajouter un événement à l'aide du code suivant.
button.addEventListener("click", RespondMouseClick, true);
Toutefois, l'application du code suivant ne permet pas de supprimer l'écouteur d'événements. Cela est dû au fait que la valeur useCapture est différente de celle enregistrée avec l'objet bouton.
button.removeEventListener("click", RespondMouseClick, false);
Pour supprimer l'événement et empêcher son déclenchement, vous pouvez utiliser le code suivant.
button.removeEventListener("click", RespondMouseClick, true);
Comment fonctionnent les fonctions d'écouteurs d'événements imbriqués ?
Les écouteurs d'événements imbriqués sont des gestionnaires d'événements ajoutés aux éléments HTML au niveau de différentes couches hiérarchiques.
Dans l'exemple HTML suivant, le document est propriétaire de l'élément parent sous-jacent, tandis que le parent est propriétaire de l'élément enfant.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Les applications Web complexes peuvent comporter plusieurs couches parent-enfant avec des fonctions d'écouteur d'événements correspondantes. Lorsqu'un événement particulier se produit, il déclenche des écouteurs d'événements dans différentes couches dans un ordre particulier. Par exemple, si vous cliquez sur un bouton enfant, l'événement sera propagé à tous les gestionnaires qui capturent un clic de souris.
Les événements peuvent se propager de deux façons : par bouillonnement et par capture.
Bouillonnement d'événements
Le bouillonnement est le mode de gestion des événements JavaScript par défaut. Il propage l'événement de la couche la plus interne vers la couche la plus externe.
Par exemple, un utilisateur survole une zone de texte dans la section enfant. L'application transmet ensuite l'événement dans l'ordre suivant :
- L'écouteur d'événements de l'élément enfant gère le survol de la souris.
- Ensuite, l'écouteur d'événements parent traite l'événement et transmet le contrôle à l'écouteur d'événements du document.
Pour configurer le bouillonnement d'événements, utilisez la syntaxe suivante :
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Capture d'événements
La capture d'événements est un mode spécial de gestion des événements de JavaScript, dans lequel l'événement se propage vers l'intérieur depuis la couche la plus externe. Une fois que l'événement atteint l'élément cible de la couche interne, le mode de gestion des événements passe au bouillonnement. Ensuite, le bouillonnement propage l'événement vers l'extérieur jusqu'à la couche supérieure.
Par exemple, un utilisateur clique sur un bouton enfant et démarre la séquence suivante :
- L'écouteur d'événements du document traite le clic de souris, suivi par le gestionnaire d'événements parent.
- L'événement atteint l'élément cible : le bouton. L'écouteur d'événements du bouton traite l'événement.
- La gestion des événements passe du mode capture au mode bouillonnement.
- Le même clic de souris déclenche le gestionnaire d'événements au niveau du parent avant de se terminer au niveau du document.
Bouillonnement ou capture : comment choisir ?
Le bouillonnement et la capture vous permettent de gérer les événements différemment. Le bouillonnement est rarement utilisé, car la capture suffit à gérer la plupart des événements dans les applications.
Lorsque vous choisissez entre le bouillonnement et la capture, vous devez tenir compte du flux de propagation des événements et de la manière dont il s'aligne sur la logique de programmation de votre application.
Par exemple, imaginez un formulaire parent composé de deux éléments enfants. Le premier élément nécessite une mise à jour immédiate lorsqu'un événement se produit au niveau du second élément. Dans ce cas, vous devez utiliser le mode capture. Il garantit que l'écouteur d'événements parent traite l'événement et met à jour le premier élément. Il transmet ensuite le contrôle à l'écouteur d'événements au niveau du deuxième élément enfant.
Comment arrêter la propagation des événements dans les fonctions d'écouteurs d'événements imbriqués ?
Les événements se propagent jusqu'à ce qu'ils atteignent leur destination finale dans des écouteurs imbriqués. Vous devez utiliser des méthodes spécifiques pour empêcher la propagation de l'événement.
La méthode suivante arrête l'événement au niveau de l'écouteur d'événements.
event.stopPropagation();
Par exemple, si vous appelez StopPropagation au niveau du bouton enfant, le clic de souris ne se propagera pas aux niveaux parent et document. Par conséquent, les écouteurs d'événements de niveau supérieur ne seront pas déclenchés.
Arrêt de toute propagation d'événements
StopPropagation arrête uniquement la propagation du type d'événement actuel. Si différents types d'écouteurs d'événements sont enregistrés sur l'objet, ils se déclenchent toujours malgré l'appel StopPropagation.
Pour arrêter tous les événements liés à un objet spécifique, vous pouvez utiliser la méthode StopImmediatePropagation, comme suit.
event.stopImmediatePropagation();
Lorsqu'un écouteur d'événements appelle StopImmediatePropagation, aucun autre écouteur d'événements associé à l'objet n'est déclenché.
Comment AWS peut-il prendre en charge vos exigences en matière de JavaScript ?
Amazon Web Services (AWS) propose le kit AWS SDK pour JavaScript qui vous permet d'utiliser facilement les services dans vos applications à l'aide de bibliothèques et d'API.
Vous pouvez utiliser le kit SDK pour développer des applications côté serveur, Web et mobiles. Le kit SDK prend en charge l'exécution JavaScript, Node.js et React Native, ainsi que l'exécution croisée. Cela permet aux développeurs d'exécuter le même package de service client sur différentes plateformes.
Voici d'autres avantages liés à l'utilisation du kit SDK :
- Le kit SDK est écrit en TypeScript. Cela offre des avantages tels que la vérification de type statique et la prise en charge des classes et des modules.
- Le kit SDK propose une pile d'intergiciels qui vous permet d'introduire des actions personnalisées.
- Son architecture modulaire vous permet d'utiliser uniquement les packages nécessaires pour optimiser les performances des applications.
Démarrez avec les applications JavaScript en créant un compte AWS dès aujourd'hui.
