Ereignis und Ereignis-Listener in JavaScript

Als ich mich dem Ende meiner ersten Phase meines Flatiron School-Programms näherte, habe ich die Grundlagen der Programmierung in JavaScript erlernt. Aber in diesem Blog-Beitrag werde ich meine Erfahrungen mit meinem bisher Lieblingsthema diskutieren: Ereignisse und Ereignis-Listener.

JavaScript kann auf bestimmte Dinge achten, die in dem Browser, an dem Sie arbeiten, passieren können. Es gibt eine große Vielfalt an Dingen, die JS hören kann. Einige Beispiele umfassen einen Tastendruck, einen Mausklick und die Übermittlung eines Formulars, um nur einige der am häufigsten verwendeten zu nennen. Sie dienen auch als hervorragende Möglichkeit, asynchrone Interaktion zu implementieren, also die Fähigkeit einer Seite, auf Benutzereingaben zu reagieren, ohne Prozesse zu unterbrechen oder die Seite neu zu laden. Dies ist entscheidend für die Funktion einer Web-App, in der solche Funktionen erwartet werden. Was mir an Veranstaltungen am meisten gefällt, ist die Tatsache, dass sie dem Webprojekt, an dem Sie arbeiten, viel Interaktivität verleihen können.

Ereignis-Listener sind JavaScript-Funktionen, die darauf warten, dass ein bestimmtes Ereignis für ein bestimmtes Element auftritt. Sobald das Ereignis ausgelöst wird, führt der Ereignis-Listener einen bestimmten Codeblock aus (normalerweise als Callback-Funktion bezeichnet). Die gebräuchlichste Methode zum Anhängen eines Ereignis-Listeners an ein Element ist die Verwendung der Methode addEventListener.

Ich werde ein persönliches Beispiel verwenden, das ich derzeit in meinem End-of-Phase-Projekt verwende. Für mein Projekt habe ich eine einfache Web-App erstellt, die Informationen von einer API abruft und diese auf einer Webseite mit interaktiven Elementen anzeigt.

Ich habe mich entschieden, die kostenlose Amiibo-API zu verwenden, um eine Web-App zu erstellen, die alle im Laufe der Jahre erstellten Yoshi-Amiibos filtern kann. Mir gefiel die Idee, diese API zu verwenden, da Yoshi mein Lieblings-Nintendo-Charakter ist!

Hier ist ein Beispiel dafür, wie ich dieses Dropdown-Menü erstellt habe, mit dem Benutzer mithilfe von Ereignis-Listenern durch verschiedene Yoshi-Amiibos filtern können!

So sieht mein Code für diese spezielle Funktion aus

      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);
      });
    })

Lassen Sie mich durch die Vorgänge in diesem Codeblock führen.

Als erstes habe ich ein Array für die Yoshi-Amiibo-Namen erstellt.

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

Diese Zeile verfügt über eine Kartenfunktion, die die im amiibos-Array gespeicherten Elemente durchläuft. Für jedes amiibo-Objekt übernimmt es die Eigenschaft name und gibt ein neues Array mit allen Amiibo-Namen zurück.

Der nächste Schritt bestand darin, das Dropdown-Menü mit den Amiibo-Namen zu füllen.

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

Dieser Block erstellt ein HTML Dropdown-Liste und füllt es mit dem Namen des Amiibos. Es durchläuft das amiiboNames-Array mit forEach() und erstellt dann eine Element für jeden einzelnen Amiibo-Namen.

Für jeden der Namen gilt:

1. Erstellt ein neues Optionselement.
2. Setzt das Wertattribut der Option auf den Amiibo-Namen.
3. Setzt den sichtbaren Text (textContent) der Option auf den Amiibo-Namen.
4. Hängt unser neues Optionselement an das Dropdown-Menü (amiiboDropdown) an.

Danach habe ich beschlossen, dass zunächst alle Yoshi-Amiibos angezeigt werden sollen, bevor das Filter-Dropdown-Menü verwendet wird.

      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);
      });
    })

Nach dem Login kopieren

Nach dem Login kopieren

Ich habe diese Funktion erstellt, um alle Amiibos auf der Seite anzuzeigen, wenn die Seite geladen wird. Dadurch wird das gesamte amiibos-Array an die Funktion übergeben, die ich gerade oben erstellt habe.

Zuletzt musste ich den Event-Listener für die Dropdown-Änderungen einrichten.

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

Nach dem Login kopieren

Nach dem Login kopieren

Dies ist einer der wichtigsten Teile des Codes und der Ereignis-Listener dieser Funktion. Dadurch kann die Seite die Amiibos filtern, die auf der Seite angezeigt werden, basierend auf der Auswahl im Dropdown-Menü.

Dies funktioniert so, dass die Funktion addEventListener() auf das Änderungsereignis im amiiboDropdown-Element (oder im Dropdown-Menü

) wartet. Immer wenn der Benutzer der Web-App einen neuen Wert auswählt, oder in diesem Fall ein bestimmtes Yoshi-Amiibo, löst das Ereignis die Rückruffunktion aus.

Die Reihenfolge, in der dies funktioniert, ist:

1. Die Variable selectedName speichert den Wert der mit e.target.value ausgewählten Option
2. Dann wird das Amiibo-Array gefiltert, um sicherzustellen, dass es nur die Yoshi-Amiibo enthält, die mit dem ausgewählten Namen übereinstimmen.
3. Nach dem Filtern wird das gefilterteAmiibos-Array an displayAmiibos() übergeben, das dann die Benutzeroberfläche mit der gefilterten Liste der Yoshi-Amiibos aktualisiert.

Einpacken

Ereignisse und Ereignis-Listener in JavaScript gehören zu den wichtigsten Dingen, die Sie bei der Entwicklung einer Web-App mit Interaktivität wissen sollten. Sie sind allein deshalb großartig; Es gibt einer App Funktion und Zweck und bietet Benutzern gleichzeitig die Möglichkeit für ein nahtloses Erlebnis.

Das obige ist der detaillierte Inhalt vonEreignis und Ereignis-Listener in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!