HTML DOMイベントオブジェクト

HTML DOM イベントオブジェクト：网页インタラクションの核心を掌握する

**説明:** HTML DOMイベントオブジェクトを詳しく解説し、そのプロパティ、メソッド、一般的な使用シーンを網羅することで、ウェブページインタラクションの核心技術を簡単に習得できるようにします。

一、HTML DOM イベントオブジェクトとは？

- イベントオブジェクトとは、イベント発生時にブラウザがイベントハンドラ（例：onclick）に渡すJavaScriptオブジェクトです。

- イベントのタイプ、イベントが発生した要素、マウスの位置など、イベントに関する必要な情報がすべて含まれています。

二、よく使われるイベントオブジェクトプロパティの詳細

**target プロパティ:** イベントをトリガーしたHTML要素を返します。
**type プロパティ:** "click"、"mouseover"などのイベントのタイプを返します。
**clientX/clientY プロパティ:** ブラウザウィンドウの**表示領域**内におけるマウスのX座標とY座標を返します。
**screenX/screenY プロパティ:** **コンピュータ画面全体**におけるマウスのX座標とY座標を返します。
**preventDefault() メソッド:** リンクのジャンプを阻止するなど、イベントのデフォルト動作をキャンセルします。
**stopPropagation() メソッド:** 親要素へのイベントのバブリングを停止します。

三、一般的なイベントタイプと使用シーン

**マウスイベント:** click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove など。クリック、ホバー、移動など、マウスのさまざまな操作を処理するために使用します。
**キーボードイベント:** keydown, keypress, keyup。文字入力、ショートカットキーなど、キーボードのキー操作を処理するために使用します。
**フォームイベント:** submit, focus, blur, change。フォームの送信、フォーカス取得、フォーカス喪失、内容変更などを処理するために使用します。
**ページイベント:** load, unload, resize, scroll。ページの読み込み、アンロード、ウィンドウサイズの変更、スクロールバーのスクロールなどを処理するために使用します。

四、イベントオブジェクトの適用例

**クリックされた要素の内容を取得する:** `event.target`を使用してクリックされた要素を取得し、`innerHTML`または`textContent`を使用してその内容を取得します。


<button id="myButton">クリック</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', (event) => {
    console.log(event.target.textContent); // "クリック" を出力
  });
</script>

**フォームのデフォルト送信を阻止する:** フォーム送信イベントで`event.preventDefault()`メソッドを使用してデフォルトの送信動作を阻止し、フォーム送信ロジックをカスタマイズできます。


<form id="myForm">
  <button type="submit">送信</button>
</form>
<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    // ここにカスタムのフォーム送信ロジックを記述
  });
</script>

**ドラッグアンドドロップ効果を実現する:** マウスイベント`mousedown`、`mousemove`、`mouseup`をイベントオブジェクトの座標情報と組み合わせて使用することで、要素のドラッグアンドドロップ効果を実現できます。


<div id="draggable" draggable="true">ドラッグできます</div>
<script>
  const draggable = document.getElementById('draggable');
  let isDragging = false;
  let offsetX, offsetY;

  draggable.addEventListener('mousedown', (event) => {
    isDragging = true;
    offsetX = event.clientX - draggable.offsetLeft;
    offsetY = event.clientY - draggable.offsetTop;
  });

  document.addEventListener('mousemove', (event) => {
    if (isDragging) {
      draggable.style.left = (event.clientX - offsetX) + 'px';
      draggable.style.top = (event.clientY - offsetY) + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
</script>

五、まとめ

HTML DOMイベントオブジェクトを習得することは、インタラクティブでユーザーエクスペリエンスの高いウェブページを構築するために非常に重要です。イベントオブジェクトのプロパティ、メソッド、さまざまなイベントタイプを学ぶことで、ウェブページにさまざまなインタラクティブ機能を簡単に追加し、ユーザーエクスペリエンスを向上させることができます。

HTML DOM イベントオブジェクト：网页インタラクションの核心を掌握する

一、HTML DOM イベントオブジェクトとは？

二、よく使われるイベントオブジェクトプロパティの詳細

三、一般的なイベントタイプと使用シーン

四、イベントオブジェクトの適用例

五、まとめ

関連Q&A

Q1: イベントバブリングとは何ですか？

Q2: イベントオブジェクトの`preventDefault()`メソッドと`stopPropagation()`メソッドの違いは何ですか？

Q3: イベントデリゲーションとは何ですか？