JavaScript 中的事件與事件監聽器

當我的 Flatiron School 課程第一階段即將結束時，我已經學習了 JavaScript 程式設計的基礎知識。但在這篇文章中，我將討論我迄今為止最喜歡的主題的經驗：事件和事件監聽器。

JavaScript 可以偵聽您正在使用的瀏覽器中可能發生的特定事件。 JS 可以聽的東西很多。一些範例包括按鍵、滑鼠點擊和表單提交，僅舉幾個最常用的範例。它們也是實現非同步互動的好方法，即頁面能夠響應用戶輸入而不中斷進程或重新載入頁面。這對於網頁應用程式的功能至關重要，因為網路應用程式需要類似的功能。我最喜歡事件的一點是，它們可以為您正在處理的 Web 專案添加大量互動性。

事件監聽器是等待指定元素上發生特定事件的 JavaScript 函數。一旦事件觸發，事件監聽器就會執行特定的程式碼區塊（通常稱為回呼函數）。將事件偵聽器附加到元素的最常見方法是使用 addEventListener 方法。

我將使用我目前在階段末專案中使用的個人範例。對於我的項目，我創建了一個簡單的 Web 應用程序，它從 API 獲取資訊並將其顯示在帶有互動元素的網頁上。

我決定使用免費的 Amiibo API 創建一個 Web 應用程序，可以過濾多年來創建的所有 Yoshi Amiibo。我喜歡使用這個 API 的想法，因為 Yoshi 是我最喜歡的任天堂角色！

這是我如何製作此下拉式選單的範例，該選單允許使用者使用事件偵聽器過濾不同的 Yoshi Amiibos！

這是我的特定函數的程式碼

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

讓我帶您了解這段程式碼中發生了什麼事。

我做的第一件事是為 Yoshi Amiibo 名字建立一個陣列。

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

該行有一個映射函數，可迭代儲存在 amiibos 數組中的項目。對於每個 amiibo 對象，它將採用 name 屬性並傳回一個包含所有 Amiibo 名稱的新陣列。

下一步是用 Amiibo 名稱填滿下拉式選單。

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

此區塊建立一個 HTML 下拉式選單並用 Amiibos 的名字填滿它。它使用 forEach() 迭代 amiiboNames 數組，然後建立一個 每個 Amiibo 名稱的元素。

對於每個名稱，它：

1. 建立一個新的選項元素。
2. 將選項的 value 屬性設定為 Amiibo 名稱。
3. 將選項的可見文字（textContent）設定為 Amiibo 名稱。
4. 將我們的新選項元素附加到下拉式選單 (amiiboDropdown)。

之後，我決定在使用過濾器下拉清單之前先顯示所有 Yoshi Amiibo。

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

我建立了這個函數，以便在頁面載入時顯示頁面上的所有 Amiibo。其作用是將整個 amiibos 數組傳遞到我上面剛剛創建的函數中。

最後，我必須為下拉清單更改設定事件偵聽器。

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

這是程式碼中最重要的部分之一，是該函數的事件監聽器。這使得頁面可以根據下拉式選單中選擇的內容過濾頁面上顯示的 Amiibo。

其運作方式是 addEventListener() 函式偵聽 amiiboDropdown 元素（或 下拉清單）上的變更事件。每當網路應用程式的使用者選擇一個新值，或在本例中選擇一個特定的 Yoshi Amiibo 時，該事件就會觸發回呼函數。

其工作順序為：

1. selectedName 變數將儲存使用 e.target.value 選擇的任何選項的值
2. 然後它將過濾 amiibos 數組，以確保它只包含與 selectedName 匹配的 Yoshi Amiibo。
3. 過濾後，filteredAmiibos 陣列會傳遞給 displayAmiibos()，然後函數會使用過濾後的 Yoshi Amiibos 清單更新 UI。

總結

JavaScript 中的事件和事件監聽器是開發具有互動性的 Web 應用程式時需要了解的一些最重要的事情。他們之所以偉大，僅因為這一點；它賦予應用程式功能和用途，同時為用戶提供無縫體驗的機會。

以上是JavaScript 中的事件與事件監聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！