JavaScript の DOM イベントを理解する: インタラクションの包括的なガイド

JavaScript の DOM イベント

DOM イベント は、ユーザー操作、リソースの読み込み、状態の変更など、ブラウザーで発生するアクションまたは出来事です。イベントは Web 開発に不可欠な部分であり、開発者は Web ページをインタラクティブに作成できます。

---

1. DOM イベントとは何ですか?

DOM イベントは、JavaScript を使用して検出できるインタラクションまたは変更を表します。イベントの例は次のとおりです:

• ボタンをクリック(クリック)
• 入力フィールドへの入力 (input、keydown、keyup)
• 要素の上にカーソルを置く (マウスオーバー、マウスアウト)
• フォームの送信 (送信)
• ページ読み込み完了(ロード)

---

2.イベントリスナー

イベント リスナーは、ターゲット要素で特定のイベントが発生するのを待つ関数です。

イベント リスナーの追加

要素にイベント リスナーをアタッチするには、addEventListener メソッドを使用します。

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

イベント リスナーの削除

removeEventListener メソッドを使用して、イベント リスナーを切り離します。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. DOM イベントの種類

A.マウスイベント

• click: マウスが要素をクリックすると起動します。
• dblclick: マウスがダブルクリックされると起動します。
• Mouseover: マウスが要素に入ると起動します。
• Mouseout: マウスが要素から離れると発生します。

B.キーボードイベント

• keydown: キーが押されたときに発火します。
• keyup: キーが放されたときに起動します。
• keypress: 非推奨です。代わりに keydown を使用してください。

C.フォームイベント

• submit: フォームが送信されると起動されます。
• change: 入力要素の値が変更されたときに発生します。

D.ウィンドウイベント

• load: ページが完全にロードされたときに起動します。
• サイズ変更: ブラウザ ウィンドウのサイズが変更されるときに発生します。
• スクロール: ページがスクロールされると発生します。

E.入力イベント

• input: 入力フィールドの値が変更されたときに発生します。
• focus: 入力要素がフォーカスを取得すると起動します。
• Blur: 入力要素がフォーカスを失ったときに発生します。

---

4.イベントオブジェクト

イベントが発生すると、JavaScript はイベントに関する詳細を含む イベント オブジェクト を提供します。

イベントオブジェクトの共通プロパティ

• type: イベントのタイプ (クリック、キーダウンなど)。
• target: イベントをトリガーした要素。
• currentTarget: イベント ハンドラーがアタッチされる要素。
• PreventDefault(): イベントのデフォルトのアクションを防止します。
• stopPropagation(): イベントの親要素への伝播を停止します。

例

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5.イベントの伝播

イベントの伝播によって、イベント ハンドラーが実行される順序が決まります。

A.イベントバブリング

イベントはターゲット要素から始まり、その祖先までバブルアップします。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

ボタンをクリックすると、両方のハンドラーがトリガーされます。

B.イベントキャプチャ

イベントはルートから始まり、ターゲット要素まで下に移動します。

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
  event.preventDefault(); // Prevent default behavior
});

3 番目のパラメータを true に設定すると、キャプチャが有効になります。

伝播の停止

さらなる伝播を防ぐには stopPropagation() を使用します。

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

---

6.イベントの委任

イベント委任は、イベントバブリングを活用して、動的に追加された要素のイベントを管理します。

例

element.addEventListener("click", handler, true);

---

7.実践例

A.表示/非表示を切り替え

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B.フォームの検証

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C.無限スクロール

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8.概要

• DOM イベントにより、ユーザーと Web ページ間の対話が可能になります。
• イベント ハンドラーをアタッチするには、addEventListener を使用します。
• 効果的なイベント管理のために、イベント オブジェクトと伝播を理解します。
• 動的要素を操作する場合、パフォーマンスを向上させるためにイベント委任を使用します。

DOM イベントをマスターすることで、非常にインタラクティブでユーザーフレンドリーな Web アプリケーションを作成できます。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の DOM イベントを理解する: インタラクションの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。