DOMイベントの基本（クリック、入力、キーボード、マウスなど）

DOM（Document Object Model）では、ユーザーの操作に応じてイベントが発生し、JavaScriptを用いてそれに応答することができます。ここでは、Web開発で頻繁に使われる基本的なイベントについて説明します。

1. クリックイベント（click）

  • 概要: ユーザーが要素をクリックしたときに発生するイベントです。

  • 用途: ボタンを押したときに処理を実行する、リンクをクリックしたときの挙動を制御するなど。

  • 例:

javascript
document.getElementById("btn").addEventListener("click", function() {
  alert("ボタンがクリックされました");
});

2. 入力イベント（input, change）

  • input: フォーム要素（テキストボックス、テキストエリアなど）に入力が行われるたびに発生します。

  • change: 入力が確定したタイミング（フォーカスが外れたときなど）で発生します。

  • 例:

javascript
document.getElementById("textBox").addEventListener("input", function(event) {
  console.log("現在の入力値:", event.target.value);
});

3. キーボードイベント（keydown, keyup, keypress）

  • keydown: キーが押された瞬間に発生。

  • keyup: キーが離された瞬間に発生。

  • keypress: 文字キーが押されたときに発生（現在は非推奨で、keydown/keyupの利用が推奨）。

  • 用途: ショートカットキーの実装、特定キー押下の判定。

  • 例:

javascript
document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enterキーが押されました");
  }
});

4. マウスイベント（mouseover, mouseout, mousemove, mousedown, mouseup）

  • mouseover: 要素にマウスカーソルが乗ったとき。

  • mouseout: 要素からカーソルが離れたとき。

  • mousemove: マウスが動いたとき。

  • mousedown: マウスボタンが押されたとき。

  • mouseup: マウスボタンが離されたとき。

  • 例:

javascript
document.getElementById("box").addEventListener("mouseover", function() {
  this.style.backgroundColor = "lightblue";
});

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

イベントが発生すると、イベントに関する情報を保持する「イベントオブジェクト」が自動的に渡されます。

  • event.target: イベントが発生した要素。

  • event.type: イベントの種類（click, keydownなど）。

  • event.key: キーボードイベントの際に押されたキー。

まとめ

  • クリック: 要素がクリックされたことを検知。

  • 入力: 入力中の値の変化や入力確定を検知。

  • キーボード: キー操作を検知し、ショートカットなどに利用可能。

  • マウス: カーソルの移動やボタン操作を検知可能。

これらの基本イベントを理解し活用することで、ユーザーと動的にやり取りできるWebアプリケーションを構築できます。

ChatGPT5 生成日：2025/09/11