JavaScript のイベントとイベントリスナー-jsチュートリアル-php.cn

JavaScript のイベントとイベントリスナー

Susan Sarandon

リリース： 2024-12-17 19:27:20

オリジナル

949 人が閲覧しました

Flatiron School プログラムの最初のフェーズが終わりに近づいた今、私は JavaScript でのプログラミングの基礎を学びました。ただし、このブログ投稿では、私のお気に入りのテーマであるイベントとイベントリスナーに関する私の経験について説明します。

JavaScript は、作業中のブラウザで発生する可能性のある特定の事柄をリッスンできます。 JS が聴くことができるものはたくさんあります。最もよく使用されるものの例としては、キーの押下、マウスのクリック、フォームの送信などが挙げられます。また、非同期対話、つまりプロセスを中断したりページを再ロードしたりせずにページがユーザー入力に応答できる機能を実装する優れた方法としても機能します。これは、そのような機能が期待される Web アプリの機能にとって非常に重要です。私がイベントで最も気に入っているのは、取り組んでいる Web プロジェクトに多くのインタラクティブ性を追加できるという事実です。

イベントリスナーは、指定された要素で特定のイベントが発生するのを待つ JavaScript 関数です。イベントがトリガーされると、イベントリスナーは特定のコードブロック (通常はコールバック関数と呼ばれます) を実行します。イベントリスナーを要素にアタッチする最も一般的な方法は、addEventListener メソッドを使用することです。

私が現在フェーズ終了プロジェクトで使用している個人的な例を使用します。私のプロジェクトでは、API から情報を取得し、インタラクティブな要素を備えた Web ページに情報を表示する単純な Web アプリを作成しました。

無料の Amiibo API を使用して、長年にわたって作成されたすべてのヨッシー Amiibo をフィルタリングできる Web アプリを作成することにしました。ヨッシーが私のお気に入りの任天堂キャラクターであることを考えると、この API を使用するというアイデアがとても気に入りました。

これは、ユーザーがイベントリスナーを使用してさまざまなヨッシー Amiibo をフィルターできるドロップダウンメニューを作成した方法の例です!
Event & Event Listeners in JavaScript

この特定の関数のコードは次のようになります

      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 名の配列を作成しました。

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 ドロップダウン) の変更イベントをリッスンすることです。 Web アプリのユーザーが新しい値、この場合は特定のヨッシー Amiibo を選択すると、イベントによってコールバック関数がトリガーされます。

これが機能する順序は次のとおりです:

selectedName 変数には、e.target.value で選択されたオプションの値が格納されます。
その後、amiibo 配列をフィルタリングして、selectedName と一致するヨッシー Amiibo のみが含まれるようにします。
フィルタリング後、filteredAmiibos 配列が displayAmiibos() に渡され、フィルタリングされたヨッシー Amiibo のリストで UI が更新されます。