【JavaScript入門】イベントからのJavaScriptとDOMの接続

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

イベントからのJavaScriptとDOMの接続

　ブラウザは HTML を読み込み終えたり、ユーザーがクリック・入力・スクロールしたりするたびに イベント を発火します。JavaScript は addEventListener() を使ってこれらのイベントにコールバック関数（ハンドラ）を登録し、DOM と“動的に”つながります。言い換えれば 「イベント → 関数 → DOM 操作」 という配線を敷くことで、静的マークアップがインタラクティブなアプリへ変わります。
　ここではイベント登録の基礎から代表的イベントの使い分けまでを体系的に解説し、クリック・キーボード・ロード時の 3 種類を組み合わせたサンプルを作ります。

１．イベントリスナーを登録・解除する

1.1. 基本メソッド

メソッド	目的	シグネチャ
`addEventListener(type, fn)`	イベント発生時に `fn` を実行	`element.addEventListener('click', handler)`
`removeEventListener(type, fn)`	登録済みの `fn` を解除	同じ参照の関数を指定

ポイント : 無名関数を直接渡すと解除できない。必要なら変数に保持。

1.2. コールバックに渡るイベントオブジェクト

主なプロパティ	説明 (click 例)
`type`	発生イベント名 (`"click"`)
`target`	実際にクリックされた要素
`timeStamp`	発生時刻 (ms)
`x` / `y`	ビューポート座標

２．代表的イベントと発火タイミング

カテゴリ	イベント	発火タイミング
ドキュメント	DOMContentLoaded	HTML 解析完了（画像読み込み前）
	load	ページ内リソースすべて読み込み後
マウス	click / dblclick	ボタン押下 & 離した瞬間
	mouseenter / mouseleave	ポインタが要素へ入る / 出る
キーボード	keydown / keyup	キー押下 / 離した瞬間
フォーム	input	値が変わるたび
	change	値確定（フォーカスアウト等）

３．イベント連携デモ

ファイル名： event_connect_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントからの JavaScript と DOM の接続</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
#counter{font-size:1.4rem;margin:1rem 0}
button{margin-right:.6rem}
#log{background:#f4f4f4;padding:.8rem;white-space:pre-wrap;height:8rem;overflow:auto}
</style>
</head>
<body>

<h2>🍪 クッキーカウンター</h2>

<div id="counter">クリック数: 0</div>
<button id="btn">クッキーを追加</button>

<p>キーボードで <kbd>r</kbd> を押すとカウンターをリセットします。</p>

<pre id="log">ログ:</pre>

<script>
/* ---------- DOMContentLoaded で初期化 ---------- */
window.addEventListener('DOMContentLoaded', () => {
  log('DOM 解析完了');
});

const counterEl = document.getElementById('counter');
const btn       = document.getElementById('btn');
const logEl     = document.getElementById('log');

let count = 0;

/* ---------- クリックイベント ---------- */
btn.addEventListener('click', e => {
  count++;
  counterEl.textContent = `クリック数: ${count}`;
  log(`${e.type} → target:${e.target.id}  count:${count}`);
});

/* ---------- キーボードイベント ---------- */
window.addEventListener('keydown', e => {
  if (e.key === 'r'){          // r キーでリセット
    count = 0;
    counterEl.textContent = 'クリック数: 0';
    log(`keydown → "${e.key}"  リセット実行`);
  }
});

/* ---------- load で最終メッセージ ---------- */
window.addEventListener('load', e => {
  log(`${e.type} (全リソース読込済み)`);
});

/* ---------- ユーティリティ ---------- */
function log(msg){
  logEl.textContent += `\n${msg}`;
  logEl.scrollTop = logEl.scrollHeight;
}
</script>
</body>
</html>

 動作説明

DOMContentLoaded … HTML 構築直後に「DOM 解析完了」をログ出力。
click … ボタンを押すたびカウントを 1 増やし、イベント情報をログ。
keydown … r キーでカウントをリセット。
load … 画像など含む全リソース読込後に最終メッセージ。

ブラウザの出力例

 イベントの接続イメージ

イベント	リスナー登録先	コールバック内で行う DOM 操作
DOMContentLoaded	`window`	初期ログ出力
click	`#btn`	テキストノード書き換え
keydown	`window`	カウンターとログ更新
load	`window`	完了ログ

プログラム解説

DOMContentLoaded

　Webページ内のDOM操作を早めに行いたい場合、load イベントではなく DOMContentLoaded イベントを利用する方が適切です。

DOMContentLoaded のタイミング
このイベントは、HTMLの解析とDOMツリーの構築が完了した瞬間に発火します。つまり、外部リソース（画像やスタイルシート、スクリプトなど）の読み込みが完全に終わっていなくても、DOM構造が整えば発生するため、比較的早く利用可能となります。
load イベントのタイミング
一方で load イベントは、ページに含まれるすべてのリソース（画像やCSS、JavaScriptなど）を完全に読み込み終わってから発火します。このため、すべてのコンテンツが読み込まれるまで待たなければならず、結果としてイベントの発生が遅くなる傾向があります。

　まとめると、DOM操作を迅速に行いたい場合は、ページ内のHTMLが読み込まれてDOMが構築された時点で発火する DOMContentLoaded イベントを使うのが効率的であるということです。

イベントリスナーの登録

btn.addEventListener('click', e => {
  count++;
  counterEl.textContent = クリック数: ${count};
  log(${e.type} → target:${e.target.id}  count:${count});
});

　このコードは、btn という要素に対して、クリックイベントが発生したときに実行される処理を登録しています。ここで使われている「e」は、イベントハンドラーに自動的に渡されるイベントオブジェクトです。以下に各部分の詳細を説明します。

イベントリスナーの登録例

javascriptコピーするbtn.addEventListener('click', e => {
  // イベントハンドラー内の処理
});

btn.addEventListener('click', ...)
これは、btn 要素に対してクリック（click）イベントのリスナーを追加する命令です。ボタンがクリックされるたびに、指定された関数が実行されます。

イベントオブジェクト「e」の意味

役割
　イベントが発生すると、そのイベントに関する詳細な情報がイベントオブジェクトとして渡されます。「e」はこのオブジェクトを受け取るパラメータ名です。通常、event と表記することもありますが、短縮形の「e」もよく使われます。

主なプロパティ

e.type：発生したイベントの種類を表します。今回の場合は 'click' となります。
e.target：イベントが発生した元の要素を指します。たとえば、ユーザーがクリックした要素です。
e.target.id：クリックされた要素（e.target）の id 属性の値です。これにより、どの要素がクリックされたかを特定するのに役立ちます。

logEl.scrollTop = logEl.scrollHeight;

この行によって、logEl のスクロール位置を一番下に設定しています。

まとめ

イベントは addEventListener(type, handler) で登録、必要に応じ removeEventListener で解除。
コールバックはイベントオブジェクトを受け取り、発生元や入力値を参照できる。
DOMContentLoaded で初期化し、ユーザー操作（click / keydown など）に応じて DOM を更新するのが定番パターン。
イベント名とタイミングを把握すれば、ロード進行・入力監視・アニメーション制御まで幅広いインタラクションを実装できる。

【JavaScript入門】イベントからのJavaScriptとDOMの接続