【JavaScript】イベント一覧とは？初心者向けに仕組みや具体的な使い方をわかりやすく解説
はじめに
JavaScriptには、さまざまなユーザー操作や画面の状態変化を捉えるためのイベントという仕組みがあります。
画面をクリックしたときやキーを押したとき、フォームに文字を入力したときなど、幅広いタイミングで処理を実行することができるのが特徴です。
皆さんがWebサイトを操作していて、ボタンをクリックするだけで画面が切り替わったり、フォームに入力した文字がリアルタイムでチェックされたりするのは、このイベントによる呼び出しによるものです。
一見難しそうに感じるかもしれませんが、仕組み自体はとてもシンプルなので、まずはどのようなイベントがあるのかをしっかりと把握するところから始めるのがおすすめです。
本記事では、JavaScriptで利用できるイベントを体系的に一覧形式で整理していきます。
また、それぞれをどう使うのかをコード例を交えて解説し、実務での活用シーンについても触れていきます。
初心者の方でも安心して読み進められるように、専門用語はできるだけ平易に説明しますので、ぜひ最後までご覧ください。
この記事を読むとわかること
- JavaScriptにおけるイベントの基本構造と流れ
- 代表的なイベント (マウス・キーボード・フォームなど) の一覧と活用方法
- イベントリスナーの登録・削除方法やイベントオブジェクトの扱い方
- 実務で役立つ具体的なイベント活用シーンの例
- イベントを扱う際の注意点 (パフォーマンスや伝播制御など)
JavaScriptイベントの概要
JavaScriptのイベントとは、ユーザーがマウスクリックやキー入力などのアクションを行ったり、ページが読み込まれたりしたタイミングで発生する合図のようなものです。
それを受け取って、特定の処理を行う仕組みが用意されています。
イベントの考え方を理解しておくと、ユーザー操作に応じてリアルタイムに画面が変化する仕組みが把握しやすくなるでしょう。
実際のWeb開発では、ユーザーに何かしらの操作をしてもらう→JavaScriptがそれを検知して処理を実行するという流れが非常に多く使われます。
イベントとは
イベントは、英語の「event（出来事）」という意味の言葉の通り、「何かが起こった」という事実を通知する仕組みです。
JavaScriptでは、ボタンがクリックされたときやフォームにデータが入力されたときなど、特定の状態変化をイベントとして扱います。
もし何のイベントもなければ、ユーザーは画面を操作しても何も変化がない静的なページを見るだけになってしまいます。
インタラクティブなWebページを作るうえで、イベントは必要不可欠といえるでしょう。
イベントの流れ
JavaScriptのイベントが発生したとき、ブラウザは「イベントが起きましたよ」という合図をJavaScriptのプログラムに送ります。
プログラム側では、イベントが起こることをあらかじめ「リッスン（待ち受け）」しておき、合図があれば指定した処理を実行する仕組みを整えておきます。
実装方法としては、後述するようにonclickなどのHTML属性を使った方法や、addEventListenerメソッドを使った方法があります。
どちらにしても流れとしては**「イベントの待機」→「イベントが発生したら処理実行」**という形になります。
イベント一覧
ここでは、初心者の方がよく使う代表的なイベントを中心に分類しながら紹介します。
多種多様なイベントがありますが、大きくマウス・キーボード・フォーム・DOM関連などに分類すると理解しやすいです。
マウス系
マウス操作系のイベントは、Webページを操作するうえで最も頻繁に使われるカテゴリーです。
ボタンをクリックしたときやマウスカーソルが要素に乗ったときなど、ユーザーが視覚的に操作している場面で活躍します。
click
clickイベントは、要素がクリック（プレス＋リリース）されたタイミングで発生します。
ボタン押下のようなUIパーツでほぼ必須となるイベントなので、最初に覚えると良いでしょう。
<!DOCTYPE html> <html> <body> <button id="myButton">クリックしてみよう</button> <script> const myButton = document.getElementById("myButton"); myButton.addEventListener("click", function() { alert("クリックされました"); }); </script> </body> </html>
上記の例では、ボタンがクリックされたときにアラートが表示されます。
実務でも、ボタン押下による画面切り替えやデータ送信などに活用されるケースが多いでしょう。
dblclick
dblclickイベントは、要素がダブルクリックされたタイミングで発生します。
単純なクリックと区別して処理したい場合に便利ですが、スマホなどのタッチデバイスではダブルクリックという概念がない場合もあるので、使用シーンには注意が必要です。
contextmenu
contextmenuイベントは、要素を右クリックしたときに発生します。
通常はブラウザのコンテキストメニュー（右クリックメニュー）が表示されますが、これをカスタマイズしたい場合などにこのイベントを使います。
たとえば右クリック時に独自のメニューを表示したい場合など、UIを工夫したいときに登場します。
mouseover
mouseoverイベントは、マウスカーソルが要素に乗ったタイミングで発生します。
マウスカーソルが領域に入った瞬間に何か演出したい場合、例えば要素の色を変えるといった時によく使われます。
mouseout
mouseoutイベントは、マウスカーソルが要素から離れたタイミングで発生します。
mouseoverとセットで使われることが多く、要素上にマウスカーソルがある間だけ特別な見た目にしたい場合などに便利です。
キーボード系
キーボード系のイベントは、ユーザーが文字入力などを行うときに非常に重要になります。
フォームアプリケーションやゲームなどで、キー操作を捉えて処理を実行する場面が典型例です。
keydown
keydownイベントは、ユーザーがキーを押し込んだ瞬間に発生します。
テキストボックスで文字入力が始まったタイミングを捉える場合などに使われます。
keyup
keyupイベントは、押し込んでいたキーを離した瞬間に発生します。
文字入力後の文字確定をトリガーとして、何か処理をしたい場合に活用されることが多いです。
リアルタイムで入力内容をチェックしたい場面などでは、keydownと組み合わせるケースもあります。
フォーム系
フォームに関連するイベントは、ユーザーが入力したデータを処理する際に欠かせません。
送信ボタンを押したタイミングで発生するものや、入力内容が変わったタイミングで発生するものなど、複数の種類があります。
submit
submitイベントは、フォーム内の送信ボタンを押した、もしくはEnterキーを押したタイミングで発生します。
送信データのバリデーション（検証）などを行う場合に便利です。
event.preventDefault()を使えば、ブラウザ標準の送信動作を阻止して、JavaScript側で独自に処理を進めることもできます。
change
changeイベントは、フォーム要素の値が変更されて、かつ要素がフォーカスを失ったときなどに発生します。
文字入力のリアルタイム検知をしたいときはkeydownなど他のイベントのほうが有用ですが、フォームの状態が最終的に変わったときの検知をしたい場合に活用されます。
DOM系
DOMに関連するイベントは、ページの読み込み完了や要素の追加・削除など、ページ自体の状態変化に応じて発生します。
特にページがすべて読み込まれたあとに処理を走らせたい場合に便利です。
DOMContentLoaded
DOMContentLoadedイベントは、HTML文書が読み込まれ、DOM構造が完全に作られたタイミングで発生します。
画像やスタイルシートなど、すべてのリソースが読み込まれる前でも、文書構造が利用可能になった時点で処理できるメリットがあります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOMContentLoadedのサンプル</title> </head> <body> <div id="sample">まだDOMが読み込まれていません</div> <script> document.addEventListener("DOMContentLoaded", function() { const target = document.getElementById("sample"); target.textContent = "DOMが読み込まれました"; }); </script> </body> </html>
このように、ページ構造が整った後に実行したい処理をDOMContentLoadedでまとめるのが一般的です。
load
loadイベントは、画像なども含めたページ内の全リソースが完全に読み込まれた段階で発生します。
それゆえにユーザーに関連する動作を準備万端で行いたいときに使われますが、読み込み時間がかかるとイベント自体が遅れて発生する可能性もあるので、ケースバイケースで使い分ける必要があります。
ウィンドウ系
ウィンドウ関連のイベントは、画面のスクロールやリサイズといった、ページ全体の状態変化を扱うものです。
UIやレイアウトの動的な調整などを行う場合に有用です。
scroll
scrollイベントは、ページや要素のスクロールが発生するたびに呼び出されます。
スクロール位置に応じてアニメーションを表示する仕組みや、特定の位置にきたらコンテンツを読み込む「インフィニットスクロール」などでよく用いられます。
resize
resizeイベントは、ウィンドウサイズが変更されたときに発生します。
レスポンシブ対応のレイアウトを調整したり、コンテナの大きさに応じてキャンバスをリサイズしたりするときに便利です。
カスタムイベント
標準で用意されているイベント以外に、自分で独自のイベントを定義することも可能です。
JavaScriptのCustomEventを使うと、ユーザー独自のイベント名を設定し、dispatchEventで発火させることができます。
<!DOCTYPE html> <html> <body> <script> // カスタムイベントを定義 const myEvent = new CustomEvent("myCustomEvent", { detail: { message: "独自イベントが発火しました" } }); // 受け取る側 document.addEventListener("myCustomEvent", function(event) { console.log(event.detail.message); }); // 発火 document.dispatchEvent(myEvent); </script> </body> </html>
このように、標準イベントだけではカバーしきれない独自のシナリオを実装したいときに重宝します。
イベントリスナーの登録方法
イベントを使う上で基本となるのは「いつどこでイベントを受け取り、どんな処理をするか」を指定する部分です。
初心者の方が最初に触れるのはHTML属性を使う方法かもしれませんが、後々の拡張性を考えるとaddEventListenerがおすすめです。
onXXX属性を使う方法
一番簡単なのは、HTML要素側にonclickやonchangeといった属性を直接書く方法です。
たとえばボタンの場合は以下のように書けます。
<button onclick="alert('クリックされました')">ボタン</button>
この方法は記述量が少なく、初心者にはわかりやすいというメリットがあります。
ただ、HTMLとJavaScriptが混ざってしまうので、大きなプロジェクトでは管理がしづらいこともあります。
addEventListenerを使う方法
より推奨されるのが、JavaScriptでaddEventListenerメソッドを使ってイベントを登録する方法です。
HTMLとスクリプトを分離して管理しやすくなるため、一般的にはこちらが主流です。
<!DOCTYPE html> <html> <body> <button id="myBtn">クリック</button> <script> const btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { alert("クリックされました"); }); </script> </body> </html>
**"イベント名"と"コールバック関数"**を引数として渡すだけで、簡単にリスナーを追加できます。
このスタイルで書いておけば、後からコードを修正する際にも見通しが良くなります。
イベントリスナーの削除
必要なくなったイベントリスナーを削除したい場合には、removeEventListenerを使います。
あらかじめリスナーを関数として定義しておき、それを渡すことで削除可能になります。
<!DOCTYPE html> <html> <body> <button id="myBtn">イベント削除テスト</button> <script> function handleClick() { alert("クリックイベントが発生しました"); } const btn = document.getElementById("myBtn"); btn.addEventListener("click", handleClick); // 削除 setTimeout(() => { btn.removeEventListener("click", handleClick); }, 5000); </script> </body> </html>
この例では、ボタンをクリックしたときの処理を5秒後に削除しています。
ゲームやアプリの特定ステージが終わったらイベントを無効化するなど、実務でも状況に応じたイベントの管理が重要です。
イベントオブジェクトの基本
イベントが発生したときには、多くの場合「イベントオブジェクト」が引数として渡されます。
これにはイベントが起きた要素や発生した座標, キーコードなど、さまざまな情報が詰まっています。
event.target
event.targetは、ユーザーの操作対象となった要素を指し示します。
たとえばクリックイベントの場合、クリックされたHTML要素が返ります。
これを使えば、同じイベントを複数要素で共通利用しつつ、どの要素で起こったかを判別できます。
event.currentTarget
event.currentTargetも似たような働きをしますが、こちらはイベントが付与されている要素自体を指すのが特徴です。
イベントがバブリング（親要素へイベントが伝播する仕組み）している場合などに、targetとcurrentTargetの違いを活用します。
preventDefaultとstopPropagation
preventDefaultは、フォーム送信などのデフォルトの動作をブロックするために使います。
一方でstopPropagationは、イベントのバブリング（あるいはキャプチャ）をストップさせるために使われます。
<!DOCTYPE html> <html> <body> <a href="https://example.com" id="sampleLink">リンク</a> <script> const sampleLink = document.getElementById("sampleLink"); sampleLink.addEventListener("click", function(event) { event.preventDefault(); // リンク先への遷移をキャンセル console.log("デフォルト動作をブロックしました"); }); </script> </body> </html>
この例のように、リンクをクリックしても別ページへは飛ばず、JavaScriptの処理だけが実行されます。
ユーザー操作の流れを自由にカスタマイズできる点がイベント処理の醍醐味です。
イベントデリゲーション
イベントデリゲーション（Event Delegation）とは、親要素でイベントをまとめて受け取り、対象となる子要素が何だったのかを判別して処理を行う手法です。
大量の要素に個別でイベントを設定すると、コードが煩雑になるだけでなくパフォーマンス上の負荷も増えてしまいます。
そこで、まとめて設定することで管理を楽にするという狙いがあります。
仕組み
イベントは初期状態では子要素から親要素へ向かって伝播する（バブリング）性質があります。
例えばテーブルの行やセルにイベントを仕込む場合、膨大な数のセルに個別でリスナーをつけるより、テーブル全体にリスナーを１つつけてしまい、クリックされたセルをevent.targetで判定するほうが効率的です。
具体例
下記はリスト要素のクリックを一括管理する例です。
<!DOCTYPE html> <html> <body> <ul id="listContainer"> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> <script> const container = document.getElementById("listContainer"); container.addEventListener("click", function(event) { if (event.target && event.target.nodeName === "LI") { console.log(event.target.textContent + "がクリックされました"); } }); </script> </body> </html>
リストに新しい<li>要素を追加したとしても、親要素のイベントリスナーがそれを受け取れるため、変更に強い実装になります。
実務での活用シーン
ユーザー操作の把握
イベントは、ユーザー操作のタイミングで必ず発火します。
そのため、クリック数やキー入力などを元に、ユーザー行動を分析してUIを改善するケースがよく見られます。
例えば、ECサイトで特定の商品がどれだけクリックされたかを集計し、人気商品を上位表示するロジックに組み込むといった使い方があります。
フォーム入力のリアルタイムバリデーション
ユーザーがフォームに入力している途中で、リアルタイムにエラーチェックを行う場合、キーボードイベントやinputイベントがよく使われます。
入力内容に応じてメッセージを表示したり、送信ボタンを有効化・無効化したりする実装は、多くのWebサービスで採用されています。
スクロールアニメーション
scrollイベントを利用すれば、ページをスクロールするタイミングに合わせてアニメーションさせたり、新たな要素を読み込んだりできます。
ユーザーの操作に寄り添った自然な演出が可能なので、デザイナーやフロントエンドエンジニアが協力して動きのあるサイトを作りたいときに活躍します。
あまりにも頻繁に発生するイベント（例：scrollやmousemoveなど）をそのまま使うと、短い間隔で大量の処理が走り、ブラウザの動作が重くなることがあります。
実務では、throttleやdebounceといったテクニックを用いて、処理の回数を抑制するのが一般的です。
イベントを扱う上での注意点
パフォーマンスの観点
イベントはユーザー体験を向上させる一方、リスナーを大量に設定してしまうとパフォーマンスに影響が出ることがあります。
とりわけ、スクロールやマウス移動、ウィンドウリサイズなど高頻度で発生するイベントでは、実装の仕方によってはブラウザの負荷が上がります。
そのため、前述のイベントデリゲーションを活用し、親要素へ一括でイベントを設定する手法が選ばれることも多いです。
また、スクロールやリサイズなどは発火の頻度が想像以上に高いため、 最適化 (throttleやdebounceなど)が必須と考えてよいでしょう。
バブリングとキャプチャの混乱
イベントには、バブリング（子要素→親要素へ伝播）とキャプチャ（親要素→子要素へ伝播）の2種類の伝播フェーズがあります。
通常のaddEventListenerはバブリングフェーズで処理が行われますが、第3引数としてtrueを指定するとキャプチャフェーズで処理が行われるようになります。
開発中に「なぜか意図した要素ではなく親要素のイベントが先に処理される」といった状況になることがあるかもしれません。
それは、このバブリングとキャプチャを正しく理解していないがゆえに引き起こされることが多いです。
実務でも初心者がつまずきやすいポイントなので、イベントの流れをしっかり把握することが大事です。
複雑な要素構造であちこちにイベントリスナーを仕込むと、意図せぬタイミングで処理が走ってしまう可能性があります。
「どの段階でどの要素が反応しているのか」を整理し、不要なリスナーは削除するか、イベントデリゲーションを検討するようにしましょう。
まとめ
JavaScriptのイベントは、ユーザー操作と画面の動きを結びつける重要な仕組みです。
クリックやキーボード操作はもちろん、フォーム入力やスクロール時のアニメーションなど、多彩な場面で役立ちます。
本記事では、代表的なイベント一覧としてマウス・キーボード・フォーム・DOM・ウィンドウ・カスタムイベントを解説し、それぞれの利用シーンを具体的に紹介しました。
さらに、イベントリスナーの登録・削除方法やイベントオブジェクトの扱い、イベントデリゲーション、パフォーマンス上の注意点など、実務でよく使うトピックを確認しました。
最初のうちは「どのイベントを使えばいいのか分からない」と戸惑うこともあるかもしれませんが、よく使うイベントは決まっているため、一つひとつ手を動かしながら慣れていくのがポイントです。
細かなカスタマイズを行うほど、イベントの伝播やオブジェクトの仕組みを深く理解することが求められますが、基本の流れを押さえておけば対応しやすくなります。
ぜひ、簡単なサンプルを作りながらイベントの動きを体感してみてください。
こうした積み重ねが、より使いやすいWebアプリケーション作りへとつながるでしょう。