プレゼンテーションシナリオ: スライド116、117

スライド116と117では、DOM Events（DOMイベント）について説明します。

DOM Eventsとは？

JavaScriptでは、event（イベント）はWebページ上で発生するアクション（例：ユーザーがマウスをクリック、キーボードを押す、ページの読み込みが完了するなど）です。DOMを使用すると、これらのイベントをキャッチして処理し、ユーザーとのインタラクションを作成できます。

HTML要素は、JavaScriptコードを含むイベント属性（event attributes）を受け取ることができます。例：

<button onclick="...">...</button>

または：

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

一般的なイベント：

  • onchange: 要素の内容が変更されたとき。
  • onclick: ユーザーが要素をクリックしたとき。
  • onmouseover: マウスが要素の上に移動したとき。
  • onmouseout: マウスが要素から離れたとき。
  • onkeydown: ユーザーが任意のキーを押したとき。
  • onload: ブラウザがページの読み込みを完了したとき。

イベントを扱う方法はいくつかあります：

  1. HTML属性に直接JavaScriptコードを埋め込む。
  2. イベントが発生したときに関数を呼び出す。
  3. JavaScriptからハンドラを割り当てる。
  4. イベントの送信または処理を防ぐ。

addEventListener() - プロフェッショナルな方法

addEventListener()の概要

  • 要素、document、またはwindowにイベントを割り当てるために使用します。
  • 複数のハンドラを同時に許可し、上書きされません。
  • バブリング（デフォルト）とキャプチャリングをサポートします。
  • JSをHTMLから分離し、コードが明確で管理しやすくなります。

基本構文:

element.addEventListener(event, function, useCapture);

ここでは：

  • event: イベントの種類（例："click"、"mousedown"、"mousemove"、"resize"など）
  • function: イベント処理関数（無名関数または名前付き関数）。
  • useCapture（オプション）: false（デフォルト、バブリングで処理）; true（キャプチャリングモード）

例：

シンプルなclickイベントを割り当て:

document.getElementById("myBtn").addEventListener("click", displayDate);

同じ要素に複数のイベントを上書きせずに割り当て:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

以上で、DOM EventsとJavaScriptでイベントを処理するためのaddEventListener()の使用方法についての説明を終わります。