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

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

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

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

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

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

これは、ユーザーがイベント リスナーを使用してさまざまなヨッシー 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 名の配列を作成しました。

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 を作成します。ドロップダウンを選択し、Amiibo の名前を入力します。 forEach() を使用して amiiboNames 配列を反復処理し、 を作成します。個々の Amiibo 名の要素。

それぞれの名前については次のとおりです。

1. 新しいオプション要素を作成します。
2. オプションの value 属性を Amiibo 名に設定します。
3. オプションの表示テキスト (textContent) を Amiibo 名に設定します。
4. 新しいオプション要素をドロップダウン (amiiboDropdown) に追加します。

その後、フィルタ ドロップダウンを使用する前に、すべてのヨッシー アミーボを最初に表示することにしました。

      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 を表示するこの関数を作成しました。これは、amiibo 配列全体を上で作成した関数に渡すことを意味します。

最後に、ドロップダウンの変更のためにイベント リスナーを設定する必要がありました。

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

これはコードの最も重要な部分の 1 つであり、この関数のイベント リスナーです。これにより、ドロップダウン メニューで選択された内容に基づいて、ページに表示される Amiibo をページでフィルタリングできるようになります。

これが機能する方法は、addEventListener() 関数が amiiboDropdown 要素 (または ドロップダウン) の変更イベントをリッスンすることです。 Web アプリのユーザーが新しい値、この場合は特定のヨッシー Amiibo を選択すると、イベントによってコールバック関数がトリガーされます。

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

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

まとめ

JavaScript のイベントとイベント リスナーは、対話型 Web アプリを開発する際に知っておくべき最も重要なことの 1 つです。その事実だけでも彼らは素晴らしいのです。ユーザーにシームレスなエクスペリエンスを提供すると同時に、アプリの機能と目的を提供します。

以上がJavaScript のイベントとイベント リスナーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。