DOM イベントを理解する

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 ページをユーザー エンゲージメントを強化するインタラクティブなエクスペリエンスに変換できます。

以上がDOM イベントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。