JavaScript

JavaScriptのイベントとは？addEventListenerの使い方を解説

この記事でわかること

  • イベントとは何か？
  • addEventListener の使い方
  • よく使うイベント一覧
  • クリック・入力・スクロール・読み込みイベントの実例
  • 初心者がつまずくポイント

JavaScriptの学習で避けて通れないのが イベント。
Webサイトの「動き」や「ユーザー操作」に反応させるための仕組みです。

イベントとは？

ユーザーの操作やブラウザの動きに反応して処理を実行する仕組み のこと。

イベントの具体例

  • ボタンを クリック した
  • テキストを 入力 した
  • ページを スクロール した
  • ページの読み込みが 完了 した
  • マウスを 乗せた（hover）

これらのタイミングに合わせて JavaScript を実行することで
Webサイトが「動く」ようになります。

JavaScriptのイベント処理の基本：addEventListener()

最も一般的な書き方が addEventListener()。

基本構文

要素.addEventListener("イベント名", function() {
  // イベントが起きたときの処理
});

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

📘 例：ボタンをクリックしたら文字を表示

HTML

<button id="btn">クリック</button>

JavaScript

const btn = document.getElementById("btn");

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

2. 入力イベント（input）

ユーザーが文字を入力するたびに発火。

📘 例：入力した文字をリアルタイムで表示

HTML

<input id="text" type="text">
<p id="output"></p>

JavaScript

const text = document.getElementById("text");
const output = document.getElementById("output");

text.addEventListener("input", function() {
  output.textContent = text.value;
});

3. マウスイベント（mouseover / mouseout）

マウスが乗ったり離れたりした時のイベント。

📘 例：マウスが乗ったら色を変える

const box = document.getElementById("box");

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "lightblue";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "white";
});

4. スクロールイベント（scroll）

ページをスクロールした時に発火。

📘 例：スクロール量を表示

window.addEventListener("scroll", () => {
  console.log(window.scrollY + "pxスクロールしました");
});

5. ページ読み込みイベント（DOMContentLoaded）

ページのHTML読み込み完了後に発火。
画像などの読み込みを待ちたい時は load を使用。

📘 HTML読み込み完了後に処理する

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOMの読み込みが完了しました");
});

よく使うイベント一覧

イベント名意味よく使う場面
clickクリックボタン操作
input入力があったフォーム入力
change値が変わったセレクトボックスなど
submitフォーム送信バリデーション
mouseoverマウスが乗ったホバー演出
mouseoutマウスが離れたホバー終了
scrollスクロール要素アニメーション
keydownキーを押した瞬間キーボード操作
keyupキーを離した時入力判定
loadページ全体読み込み完了画像読み込み後の処理
DOMContentLoadedHTML構造の読み込み完了初期化処理

⚠ 初心者がつまずくポイント

❌ 1. HTMLより先にJSを読み込んでエラーが出る

→ DOMがまだ存在しないため。

✔ 対策

  • DOMContentLoaded を使う
  • または script タグを body の最後に置く

❌ 2. addEventListener と onclick を混同

element.onclick = function() {}

は1つのイベントしか登録できない。

✔ addEventListener なら複数登録できる

❌ 3. IDの取得ミス

getElementById("Btn") と HTML が "btn" だと動かない
→ 大文字・小文字が違うだけでNG

まとめ

  • イベント = 操作や動きに反応してJSを実行する仕組み
  • 基本は addEventListener を使う
  • よく使うイベントは「click」「input」「mouseover」「scroll」「DOMContentLoaded」
  • イベントを理解すると、Webサイトに「動き」を追加できる

-JavaScript