DOM イベントを理解する-jsチュートリアル-php.cn

DOM イベントを理解する

Susan Sarandon

リリース： 2024-09-30 18:30:30

オリジナル

729 人が閲覧しました

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 イベントにより次のことが可能になります。