「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > DOM イベントを理解する

DOM イベントを理解する

2024 年 11 月 8 日に公開
ブラウズ:221

Understanding DOM Events

DOM イベントは、Web ページをインタラクティブにするものです。 DOM イベントを使用すると、ページのクリックやフォームの送信が行われ、開発者は魅力的なユーザー エクスペリエンスを作成できます。

DOM イベントの例としては、ユーザーがマウスをクリックしたとき、Web ページが読み込まれたとき、画像が読み込まれたとき、HTML フォームが送信されたとき、およびユーザーがキーを押したときなどがあります。

この記事では、DOM イベントの主要な概念を簡略化し、それらを処理する方法を検討します。

1.イベントリスナーの追加

addEventListener は、要素にイベント ハンドラーをアタッチします。これにより、ページに対するユーザーの操作に要素がどのように反応するかを定義できます。

例: 以下のコードは、画像をクリックしたときにカクテルの詳細を表示する「クリック」イベントを追加しています。

`img.addEventListener('click', () => handleClick(cocktail));`

2.クエリセレクター

querySelector を使用すると、CSS のようなセレクターを使用して要素を選択できます。これは要素をターゲットにする最も汎用性の高い方法の 1 つです。

例: このコードは、Web ページ上に折りたたみ可能なセクションを作成しています。 document.querySelectorAll は Web ページ上のすべての h3 要素を選択し、一致するすべての要素の NodeList を返します。

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById と getElementsByClassName

getElementById は、一意の ID によって単一の要素をターゲットにします。

同様に、getElementsByClassName は、特定のクラスを持つすべての要素を選択し、コレクションとして返します。

例: 以下では、getElementById は HTML ドキュメント内の id 属性によって要素を検索します。

ここでは、特定のフォーム入力、新しい名前、新しい成分、新しい画像、新しいレシピにアクセスし、それらの値を取得するために使用されています。

これらの値は、const.

で定義された newCocktail オブジェクトのプロパティに保存されます。

このように、ユーザーが新しいカクテルを作成するフォームを送信すると、そのカクテルは newCocktail オブジェクト内に構造化された方法で保存されます。

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

DOMContentLoaded イベントにより、DOM が完全にロードされた後にのみ JavaScript が実行されるようになり、要素が使用可能になる前に要素にアクセスしようとするエラーが防止されます。

例: DOMContentLoaded は、スタイルシート、画像、またはその他の外部リソースが完全にロードされるのを待たずに、最初の HTML ドキュメントが完全にロードおよび解析されたときに発生するイベントです。

DOM が完全に構築されアクセス可能であることが保証されるため、イベント リスナーの追加や DOM の操作など、HTML 内の要素を安全に操作できます。

以下のコードでは、ドキュメントが利用可能になり、ユーザーが操作を開始できることをブラウザが伝えています。

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

最後のメモ

DOM イベントは、Web ページをインタラクティブでユーザーにとって魅力的なものにするための基礎となります。 addEventListener、querySelector、getElementById、getElementsByClassName などのコア メソッドを理解して利用することで、クリックやフォームの送信などに応答する動的なユーザー インターフェイスを作成できます。

さらに、DOMContentLoaded イベントにより、DOM が完全にロードされた後にのみスクリプトが実行されるため、潜在的なエラーが防止され、スムーズなユーザー操作が保証されます。

要約すると、DOM イベントにより次のことが可能になります:

  • 応答性の高い対話性を実現するために、addEventListener を使用してイベント ハンドラーをアタッチします。

  • querySelector または getElementById を使用して要素を選択し、コンテンツを動的に更新します。

  • フォーム送信などのユーザー入力に基づいて、イベントによってトリガーされるアクションを管理します。

  • DOMContentLoaded を使用してスクリプトが適切なタイミングで実行されるようにします。

これらのテクニックを使用すると、静的な Web ページをユーザー エンゲージメントを強化するインタラクティブなエクスペリエンスに変換できます。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/namimai/ Understanding-dom-events-2bb2?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3