【JavaScript】イベントハンドラーとは？使い方をわかりやすく解説！

WebアプリやWebサイトを作っていると、

  • 「ボタンをクリックしたときに処理をしたい」
  • 「フォームに入力された値をチェックしたい」

といった場面がよくありますよね。

こうした「ユーザーの操作に反応する処理」を実現するには、イベントハンドラーが欠かせません。

この記事では『イベントハンドラー』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • イベントハンドラーとは？
  • よく使われるイベントの一覧
  • イベントハンドラーの書き方
  • イベントの削除方法（removeEventListener）
  • イベントハンドラーを一度だけ実行する方法
  • イベントハンドラーのよくあるミスと対処法
  • eventオブジェクトについて

イベントハンドラーとは？

イベントハンドラーはイベントが発生したときに実行される関数です。

たとえば、以下のような操作が「イベント」にあたります。

  • ボタンがクリックされた、入力欄に文字が入力されたなどのユーザー操作
  • ページがロードされたなどのブラウザ処理に伴う特定のタイミング

こうしたイベントが起きたときに、自動的に呼び出される関数がイベントハンドラーです。

基本的なサンプルコードを以下に示します。

<button id="myBtn">クリックしてね！</button>

<script>
  document.getElementById("myBtn").addEventListener("click", function () {
    alert("ボタンがクリックされました！");
  });
</script>

上記のサンプルコードにおいて、function () { ... }がクリックされたときに実行されるイベントハンドラーです。

document.getElementById("myBtn")でHTML内のボタン（idがmyBtn）をJavaScriptで取得し、addEventListener("click", ...)で「クリックされたときに実行する処理」を登録しています。ユーザーがボタンをクリックすると、イベントハンドラーが実行され、「ボタンがクリックされました！」というアラートが表示されます。

このように、イベントハンドラーを使うことで、ユーザーの操作に応じた反応を簡単に作ることができます。

よく使われるイベントの一覧

よく使われるイベントの一覧を以下に示します。

クリック・マウス関連イベント

イベント名説明使用例
click要素がクリックされたときに発火ボタンを押して処理を実行する
dblclickダブルクリックされたときに発火テーブルの行を編集モードにする
contextmenu右クリックされたときに発火独自の右クリックメニューを表示
mousedownマウスボタンが押されたときに発火ドラッグ操作の開始検出
mouseupマウスボタンが離されたときに発火ドラッグ操作の終了処理
mousemoveマウスが動いたときに発火ツールチップの位置を動的に更新
mouseoverマウスが要素に乗ったときに発火補足情報の表示（ヒント表示など）
mouseoutマウスが要素から離れたときに発火補足情報を非表示にする
mouseenter要素に初めてマウスが入ったときに発火（子要素は無視）サブメニューを表示する
mouseleave要素からマウスが完全に離れたときに発火（子要素は無視）サブメニューを非表示にする

キーボード関連イベント

イベント名説明使用例
keydownキーが押された瞬間に発火Ctrl+S などのショートカットキー処理
keypress文字キーが押されたとき（※現在は非推奨）モダンなブラウザでは keydown を使用
keyupキーが離されたときに発火入力内容に応じた検索候補を表示

フォーム入力・状態変化関連

イベント名説明使用例
input入力欄に文字が入力されるたびに発火入力中にリアルタイムでバリデーションを行う
change値が確定して変更されたときに発火チェックボックスやセレクトボックスの変更を検出
focus入力欄にフォーカス（選択）されたときに発火入力欄を強調表示
blur入力欄からフォーカスが外れたときに発火入力内容を確認・保存する
submitフォームが送信されたときに発火バリデーションやデータ送信処理
resetフォームがリセットされたときに発火入力欄を初期状態に戻す処理

ページ・リソース読み込み関連

イベント名説明使用例
loadページや画像などの読み込みが完了したときに発火ページ表示後の初期化処理やローダー非表示
DOMContentLoadedHTML構造の解析が完了したときに発火（画像などは未読み込みでもOK）JavaScriptで初期設定を行う
beforeunloadページを離れようとしたときに発火「このページから離れますか？」という確認ダイアログを表示
unloadページを離れる直前に発火（※現在は非推奨）ログの送信など

タッチデバイス関連イベント

イベント名説明使用例
touchstart指が画面に触れたときに発火スマホでのタップ検出
touchmove指がスライドして動いたときに発火スワイプによるページ遷移
touchend指が離れたときに発火タップ操作の確定処理など
touchcancelタッチ操作が中断されたときに発火ジェスチャーを中止したときの後処理

スクロール・リサイズなどのUI関連

イベント名説明使用例
scrollスクロールされたときに発火無限スクロールや「ページトップに戻る」ボタンの表示制御
resizeウィンドウサイズが変化したときに発火レスポンシブデザインの調整処理

イベントハンドラーの書き方

イベントハンドラーには主に以下の3つの書き方があります。

  • HTML属性に直接書く
  • on○○プロパティに関数を代入
  • addEventListenerを使う（推奨）

方法①：HTML属性に直接書く

HTMLタグのon○○属性（例: onclick属性）の中に、JavaScriptコードを直接書く方法です。

<button onclick="alert('クリックされた！')">クリック</button>
  • メリット
    • とにかく手軽に書ける
    • 小さなサンプルや学習用としてはすぐに動作確認できる
  • デメリット
    • HTMLとJavaScriptが混在しており、コードが散らかりやすい
    • 保守性・再利用性が低い
    • 他のイベントリスナーと併用できない

方法②：on○○プロパティに関数を代入

JavaScript側でHTML要素を取得し、on○○プロパティ（例: onclickプロパティ）に関数（イベントハンドラー）を代入する方法です。

const btn = document.getElementById("myBtn");
btn.onclick = function () {
  console.log("クリックされました！");
};
  • メリット
    • HTMLとJSを分離できる（HTMLがすっきりする）
    • 単純なイベント処理には十分
  • デメリット
    • 同じイベント（例: click）に複数の処理を追加できない（後から代入すると上書きされる）

同じイベントが上書きされてしまうサンプルコードを以下に示します。

const btn = document.getElementById("myBtn");
btn.onclick = () => console.log("1つ目の処理");
btn.onclick = () => console.log("2つ目の処理"); // ← 1つ目は消える！

方法③：addEventListenerを使う（推奨）

addEventListenerメソッドを使って、イベントと関数を紐づける方法です。

const btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
  console.log("クリックイベント発生！");
});
  • メリット
    • 複数のイベントハンドラーを同じイベントに登録できる
    • removeEventListenerでイベント解除もできる
    • 同じ要素に異なるイベント（click, mouseoverなど）を複数設定可能
    • HTMLとJSを分離できる（HTMLがすっきりする）
  • デメリット
    • 初学者には最初だけ少し書き方が複雑に見える（慣れれば簡単）

イベントの削除方法（removeEventListener）

イベントを追加したあとに、「もうこのイベントは実行してほしくない」という場面があります。そんなときに使うのが、removeEventListener()です。

サンプルコードを以下に示します。

function handleClick() {
  console.log("クリックされました！");
}

btn.addEventListener("click", handleClick);

// イベントを削除するには
btn.removeEventListener("click", handleClick);

removeEventListener()でイベントを正しく削除するには、以下の2つが完全に一致している必要があります。

  • イベントの種類（例：click, keydown など）
  • 登録した関数そのもの（同じ関数オブジェクト）

例えば、以下に示すように無名関数を使うと削除できません。

// 無名関数でイベントを登録
btn.addEventListener("click", function () {
  console.log("無名関数は削除できない！");
});

// こうしても削除できない！
btn.removeEventListener("click", function () {
  console.log("無名関数は削除できない！");
});

function () { ... }のような無名関数は、呼び出すたびに新しい関数として作られます。見た目が同じでも、JavaScriptにとっては別のもの（別のアドレス）です。removeEventListenerは「同じ関数オブジェクト」を探して削除するので、登録した関数を見つけられず、削除することができないのです。

イベントハンドラーを一度だけ実行する方法

たとえば、「ボタンをクリックしたとき、最初の1回だけメッセージを表示したい」といった場面があります。こうした場合に便利なのが、addEventListener()のonceオプションです。

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

btn.addEventListener("click", () => {
  alert("最初の1回だけ表示！");
}, { once: true });

addEventListenerの第3引数に{ once: true }を指定すると、イベントが発生したときに処理が一度だけ実行され、自動的にイベントリスナーが解除されます。つまり、2回目以降は同じイベントが発生しても処理は行われません。

通常であれば、イベントの中でremoveEventListener()を呼び出して手動で解除する必要がありますが、onceオプションを使えばそれが不要になり、コードがシンプルになります。

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

function handleClick() {
  alert("最初の1回だけ表示！");
  btn.removeEventListener("click", handleClick);
}

btn.addEventListener("click", handleClick);

イベントハンドラーのよくあるミスと対処法

イベントハンドラーのよくあるミスを以下に示します。

btn.addEventListener("click", sayHello()); // NG!

この書き方だと、クリック前にsayHello()が実行されてしまいます。addEventListenerに渡されるのは、sayHello()の実行結果（戻り値）です。多くの場合、その戻り値はundefinedなので、クリックしても何も起きません。

このように書くのが正しい書き方です。丸カッコ()をつけずに、関数名だけを渡します。

btn.addEventListener("click", sayHello); // OK

eventオブジェクトについて

イベントが発生すると、自動的に「イベントの詳細情報」が入ったオブジェクトがイベントハンドラーに渡されます。このオブジェクトを「イベントオブジェクト（event）」と呼びます。

btn.addEventListener("click", function (event) {
  console.log(event);           // イベントの詳細全体を確認
  console.log(event.target);    // クリックされた要素
});

eventという名前は慣例であり、自由に名前をつけられます（例：eでもOK）。このeventオブジェクトには、クリックされた要素、イベントの種類、位置情報などが入っています。

イベントオブジェクトのよく使うプロパティ・メソッド一覧

プロパティ・メソッド説明使用例
event.targetイベントが発生した実際の要素クリックされたボタンなどの取得に使う
event.currentTargetイベントを登録した要素（リスナー）targetとの違いを知りたいときに
event.typeイベントの種類（例：click, submit）ログに出して確認用に便利
event.preventDefault()デフォルトの動作をキャンセルリンクの遷移、フォーム送信などを止める
event.stopPropagation()親要素へのイベント伝播を止める入れ子のイベント処理を分離したいとき
event.stopImmediatePropagation()他のリスナーへの伝播も完全に停止同じ要素に複数イベントがある場合の制御
event.clientX / clientYマウスカーソルの位置（ブラウザ内）マウス位置にツールチップを出すなど
event.pageX / pageYマウス位置（ページ全体基準）スクロール考慮した座標取得
event.keyキーボードで押されたキーの文字keydownで「Enter」などの判定に使う
event.code物理キーボードのキーコード特定のキー位置を識別（KeyA, ArrowUp など）

本記事のまとめ

この記事では『イベントハンドラー』について、以下の内容を説明しました。

  • イベントハンドラーとは？
  • よく使われるイベントの一覧
  • イベントハンドラーの書き方
  • イベントの削除方法（removeEventListener）
  • イベントハンドラーを一度だけ実行する方法
  • イベントハンドラーのよくあるミスと対処法
  • eventオブジェクトについて

お読み頂きありがとうございました。

スポンサーリンク