Événements et écouteurs d'événements en JavaScript

Alors que j'approche de la fin de ma première phase de mon programme Flatiron School, j'ai appris les bases de la programmation en JavaScript. Mais dans cet article de blog, je discuterai de mon expérience avec mon sujet préféré : les événements et les auditeurs d'événements.

JavaScript peut écouter des événements spécifiques qui peuvent se produire dans le navigateur sur lequel vous travaillez. Il existe une grande multitude de choses que JS peut écouter. Quelques exemples incluent une pression sur une touche, un clic de souris et la soumission d'un formulaire, pour n'en nommer que quelques-uns des plus utilisés. Ils constituent également un excellent moyen de mettre en œuvre une interaction asynchrone, la possibilité pour une page de répondre aux entrées de l'utilisateur sans interrompre les processus ni recharger la page. Ceci est crucial pour le fonctionnement d’une application Web, dans laquelle de telles fonctionnalités sont attendues. Ce que j'aime le plus dans les événements, c'est le fait qu'ils peuvent ajouter beaucoup d'interactivité au projet web sur lequel vous travaillez.

Les écouteurs d'événements sont des fonctions JavaScript qui attendent qu'un événement spécifique se produise sur un élément spécifié. Une fois l'événement déclenché, l'écouteur d'événement exécutera un bloc de code spécifique (généralement appelé fonction de rappel). La manière la plus courante d'attacher un écouteur d'événement à un élément consiste à utiliser la méthode addEventListener.

Je vais utiliser un exemple personnel que j'utilise actuellement dans mon projet de fin de phase. Pour mon projet, j'ai créé une application Web simple qui récupère les informations d'une API et les affiche sur une page Web avec des éléments interactifs.

J'ai décidé d'utiliser l'API Amiibo gratuite pour créer une application Web capable de filtrer tous les Amiibos Yoshi créés au fil des années. J'ai adoré l'idée d'utiliser cette API, étant donné que Yoshi est mon personnage Nintendo préféré !

Voici un exemple de la façon dont j'ai créé ce menu déroulant qui permet aux utilisateurs de filtrer différents Yoshi Amiibos à l'aide d'écouteurs d'événements !

Voici à quoi ressemble mon code pour cette fonction spécifique

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

Laissez-moi vous expliquer ce qui se passe dans ce bloc de code.

La première chose que j'ai faite a été de créer un tableau pour les noms Yoshi Amiibo.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

Cette ligne a une fonction de carte qui parcourt les éléments stockés dans le tableau amiibos. Pour chaque objet amiibo, il prendra la propriété name et renverra un nouveau tableau avec tous les noms Amiibo.

L'étape suivante consistait à remplir le menu déroulant avec les noms Amiibo.

amiiboNames.forEach(name => {
  const option = document.createElement('option');
  option.value = name;
  option.textContent = name;
  amiiboDropdown.appendChild(option);
});

Ce bloc crée un fichier HTML et le remplit avec le nom de l'Amiibos. Il parcourt le tableau amiiboNames en utilisant forEach(), puis crée une élément pour chaque nom Amiibo individuel.

Pour chacun des noms, il :

1. Crée un nouvel élément d'option.
2. Définit l'attribut value de l'option sur le nom Amiibo.
3. Définit le texte visible (textContent) de l'option sur le nom Amiibo.
4. Ajoute notre nouvel élément d'option à la liste déroulante (amiiboDropdown).

Après cela, j'ai décidé que je voudrais que tous les Amiibos Yoshi s'affichent initialement avant d'utiliser la liste déroulante des filtres.

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

Copier après la connexion

Copier après la connexion

J'ai créé cette fonction pour afficher tous les Amiibos sur la page à chaque chargement de la page. Cela fait passer l'intégralité du tableau amiibos dans la fonction que je viens de créer ci-dessus.

Enfin, j'ai dû configurer l'écouteur d'événement pour les modifications de la liste déroulante.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

Copier après la connexion

Copier après la connexion

C'est l'une des parties les plus importantes du code et c'est l'écouteur d'événements de cette fonction. C'est ce qui permet à la page de filtrer les Amiibos affichés sur la page en fonction de ce qui est sélectionné dans le menu déroulant.

La façon dont cela fonctionne est que la fonction addEventListener() écoute l'événement de changement sur l'élément amiiboDropdown (ou la liste déroulante

). Chaque fois que l'utilisateur de l'application Web sélectionne une nouvelle valeur, ou dans ce cas, un Yoshi Amiibo spécifique, l'événement déclenchera la fonction de rappel.

L'ordre dans lequel cela fonctionne est :

1. La variable selectedName stockera la valeur de toute option sélectionnée avec e.target.value
2. Il filtrera ensuite le tableau amiibos pour s'assurer qu'il n'inclura que l'Amiibo Yoshi qui correspond au nom sélectionné.
3. Après le filtrage, le tableau filteredAmiibos est ensuite transmis à displayAmiibos(), qui mettra ensuite à jour l'interface utilisateur avec la liste filtrée des Yoshi Amiibos.

Conclusion

Les événements et les écouteurs d'événements en JavaScript font partie des éléments les plus importants à connaître lors du développement d'une application Web interactive. Ils sont géniaux à cause de ce seul fait ; il donne une fonction et un objectif à une application, tout en donnant aux utilisateurs la possibilité de vivre une expérience transparente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!