JavaScriptのイベント一覧まとめ【初心者向け】

JavaScriptを使ってWebページにインタラクションを加えるためには「イベント」という考え方を理解することが非常に大切です。ボタンをクリックしたり、マウスを動かしたり、キーボードで文字を入力したりするたびに、イベントが発生しています。

このイベントをJavaScriptで処理することで、より魅力的で便利なWebサイトを作成することができます。このガイドでは、JavaScriptの主要なイベントのすべてをわかりやすく一覧にまとめ、初心者の方でも簡単に理解できるよう丁寧に説明していきます。

この記事を読むことで、JavaScriptのイベントを使いこなし、実用的な動作をさまざまなWebページに追加する力を身につけることができるでしょう。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

JavaScriptイベントの全体像と基本理解

JavaScriptイベントとは？

JavaScriptの「イベント」とは、ユーザーがWebページで行うさまざまな操作に対して、特定の反応を実行する仕組みのことです。たとえば、ボタンをクリックする、文字を入力する、画像の上にカーソルを乗せるといった操作が「イベント」にあたります。イベントはWebページとユーザーのコミュニケーションを深め、使いやすいインターフェースを提供するための大切な要素です。

イベントが発生したとき、それに対してどのような処理を行うかをJavaScriptで記述します。このような流れで「イベントを処理する」という考え方を学ぶことが、JavaScriptの使い方を深めるための第一歩です。

イベントの基本と役割

イベントにはユーザー操作に応じて発生するものが多く、Webページのさまざまな部分に反応させることが可能です。たとえば、ボタンをクリックすることでメニューが表示されたり、ページをスクロールすると追加の情報が読み込まれたりするのは、イベント処理のおかげです。このようにイベントは、ユーザーがページをどのように操作するかに応じてページの動作をコントロールし、ユーザー体験を向上させる役割を担っています。

イベントをうまく活用することで、Webページが「静的」から「動的」に変わり、より使いやすく、楽しいコンテンツを提供することができるようになります。

JavaScriptイベントの分類

JavaScriptで使えるイベントにはさまざまな種類がありますが、大まかには以下のように分類することができます。

• マウスイベント：クリックやマウスの移動など、マウスの操作に関するイベント。
• キーボードイベント：キーの押下や入力に関連するイベント。
• フォームイベント：入力フォームに関連するイベント。
• ウィンドウイベント：ページの読み込みやウィンドウサイズの変更に関するイベント。
• その他のイベント：例えばタイミング関連のイベントなど、特定の動作を管理するためのイベント。

これから、それぞれのイベントの特徴や使い方について具体的に解説していきます。

JavaScriptの主要なイベントをまとめた早見表

以下はJavaScriptの主要なイベントをまとめた早見表です。この早見表を使うことで、必要なイベントの概要を簡単に把握することができます。

マウス関連イベント一覧と使い方

マウスイベントとは？

マウスイベントは、ユーザーがマウスを使って行う操作に関連するイベントです。Webページ上のボタンをクリックする、画像の上にカーソルを乗せる、右クリックメニューを開くなど、マウスに関する操作はすべて「マウスイベント」として扱われます。

マウスイベントを使うことで、ユーザーの操作に反応するページを作り出すことができます。たとえば、ボタンをクリックすると隠れていたメニューが表示される、画像にカーソルを合わせるとアニメーションが始まるといった動作です。こうしたマウスイベントは、ページに動きとインタラクションを加えるために欠かせません。

マウスイベントの種類と用途

クリックイベント（click）

「クリックイベント」は、ユーザーがマウスの左ボタンをクリックしたときに発生するイベントです。このイベントを使うことで、ボタンのクリックに応じて新しい情報を表示したり、フォームを送信したりすることができます。以下の例は、クリックされた際にメッセージを表示する簡単なコードです。

// ボタンをクリックしたときにメッセージを表示する
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

このように、addEventListenerを使ってボタンにクリックイベントを設定することで、ユーザーがボタンをクリックした際に特定の処理を実行させることができます。

ダブルクリック（dblclick）

「ダブルクリックイベント」は、ユーザーがマウスの左ボタンを2回連続で素早くクリックしたときに発生します。このイベントを利用することで、通常のクリックと区別した動作を実行することが可能です。たとえば、画像をダブルクリックすると拡大表示する、といった機能を実装できます。

// 画像をダブルクリックして拡大表示する
const image = document.getElementById('myImage');
image.addEventListener('dblclick', function() {
  image.style.transform = 'scale(1.5)';
});

このコードにより、画像をダブルクリックすると1.5倍に拡大される動作を実現できます。

マウスオーバー（mouseover）とマウスアウト（mouseout）

「マウスオーバーイベント」は、ユーザーがマウスをある要素の上に乗せたときに発生します。例えば、リンクにカーソルを合わせると色が変わるような動作が可能です。一方、「マウスアウトイベント」は要素からカーソルが離れたときに発生します。

以下は、マウスオーバー時に色を変える例です。

// 要素にマウスを乗せたときに色を変える
const element = document.getElementById('myElement');
element.addEventListener('mouseover', function() {
  element.style.backgroundColor = 'lightblue';
});

element.addEventListener('mouseout', function() {
  element.style.backgroundColor = '';
});

これにより、ユーザーが要素にマウスを乗せた際に背景色が変わり、マウスが離れると元に戻るという視覚的なフィードバックが提供できます。

マウスダウン（mousedown）とマウスアップ（mouseup）

「マウスダウンイベント」は、ユーザーがマウスボタンを押した瞬間に発生します。一方、「マウスアップイベント」は、押したボタンを離したときに発生します。これらのイベントを使うことで、ドラッグ操作やボタンが押された瞬間の動作を細かく制御することができます。

例えば、ボタンを押している間だけ特定のスタイルに変更する場合などに利用されます。

// ボタンを押している間だけ色を変える
const button = document.getElementById('myButton');
button.addEventListener('mousedown', function() {
  button.style.backgroundColor = 'red';
});

button.addEventListener('mouseup', function() {
  button.style.backgroundColor = '';
});

このコードにより、ボタンを押している間だけ背景色が赤くなり、離すと元に戻ります。

コンテキストメニュー（contextmenu）

「コンテキストメニューイベント」は、ユーザーが右クリックしたときに発生します。このイベントを利用して、標準の右クリックメニューをカスタマイズすることができます。

// 右クリックメニューを無効にする
const element = document.getElementById('myElement');
element.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  alert('右クリックは無効です');
});

このコードでは、右クリックが行われた際に標準のコンテキストメニューを表示せずに、カスタムのアラートを表示する動作を実現しています。

キーボード関連イベント一覧と活用法

キーボードイベントの概要

キーボードイベントは、ユーザーがキーボードで文字を入力する際に発生するイベントです。たとえば、フォームに文字を入力するときや、ショートカットキーを使って特定の動作を行うときに利用されます。キーボードイベントを使うことで、ユーザーの入力を即座に検知し、反応することができます。

キーボードイベントの種類

キーダウン（keydown）

「キーダウンイベント」は、ユーザーがキーを押し下げた瞬間に発生します。このイベントは、ショートカットキーの処理や、ユーザーが入力しようとしている内容をリアルタイムにキャッチしたいときに便利です。

例えば、特定のキーを押したときに何かの動作を実行するように設定できます。

// 特定のキー（例えばEnterキー）を押したときに処理を実行する
document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Enterキーが押されました');
  }
});

このコードは、ユーザーがEnterキーを押した際にアラートを表示する処理を行います。

キーアップ（keyup）

「キーアップイベント」は、キーが押された後に離されたときに発生します。例えば、入力フィールドでユーザーが文字を入力し終わった瞬間に、その内容をチェックすることができます。

// ユーザーがキーを離したときに入力内容を表示する
const inputField = document.getElementById('myInput');
inputField.addEventListener('keyup', function() {
  console.log(inputField.value);
});

このコードにより、ユーザーがキーを離した後に現在の入力内容がコンソールに表示されます。

キープレス（keypress）

「キープレスイベント」は、キーが押されたときに発生しますが、最近ではkeydownの方がより推奨される使い方になっています。特に、キーの押し下げに関連した操作を行う際には、keydownの方が多くの場面で使われます。

フォーム関連イベント一覧と活用

フォームイベントとは？

フォームイベントは、ユーザーが入力フォームを操作する際に発生するイベントです。たとえば、テキストフィールドに文字を入力する、ドロップダウンメニューを選択する、フォームを送信するなど、ユーザーが入力に関連する操作を行ったときに利用します。

フォームイベントの種類と説明

入力イベント（input）

「入力イベント」は、ユーザーが入力フィールドに文字を入力している間にリアルタイムで発生するイベントです。これを使うことで、ユーザーが文字を入力するたびにその内容をチェックし、フォームのバリデーションを行うことが可能です。

// ユーザーが入力するたびに文字数を表示する
const inputField = document.getElementById('myInput');
const charCount = document.getElementById('charCount');
inputField.addEventListener('input', function() {
  charCount.textContent = `文字数: ${inputField.value.length}`;
});

このコードにより、ユーザーが入力するたびに現在の文字数が表示されます。

変更イベント（change）

「変更イベント」は、ユーザーが入力フィールドの値を変更し、入力が確定したときに発生します。たとえば、ドロップダウンメニューで選択肢を変更した際などに利用されます。

// ドロップダウンメニューの選択が変更されたときに表示する
const selectMenu = document.getElementById('mySelect');
selectMenu.addEventListener('change', function() {
  alert(`選択された値: ${selectMenu.value}`);
});

このコードにより、ユーザーがドロップダウンメニューの選択を変更した際に選択された値が表示されます。

フォーカスイベント（focus）とフォーカスアウト（blur）

「フォーカスイベント」は、入力フィールドが選択されたときに発生し、「フォーカスアウトイベント」は入力フィールドからフォーカスが外れたときに発生します。これを使うことで、ユーザーが入力を始めたタイミングや入力を終えたタイミングでガイドを表示したりすることが可能です。

// 入力フィールドにフォーカスが当たったときと外れたときの処理
const inputField = document.getElementById('myInput');
inputField.addEventListener('focus', function() {
  inputField.style.borderColor = 'blue';
});

inputField.addEventListener('blur', function() {
  inputField.style.borderColor = '';
});

このコードにより、入力フィールドにフォーカスが当たったときに枠線の色が青に変わり、フォーカスが外れたときに元に戻ります。

サブミットイベント（submit）

「サブミットイベント」は、フォームが送信されるときに発生します。このイベントを使うことで、フォーム送信前に入力内容を確認し、問題があればエラーメッセージを表示するなどの処理が可能です。

// フォーム送信時に入力内容を確認する
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  const inputField = document.getElementById('myInput');
  if (inputField.value === '') {
    alert('入力フィールドが空です。入力してください。');
    event.preventDefault();
  }
});

このコードにより、フォームが送信される際に入力フィールドが空の場合、送信を中止し、エラーメッセージを表示します。

ウィンドウとタイミング関連のイベント一覧

ウィンドウイベントとは？

ウィンドウイベントは、ブラウザのウィンドウやページの状態に関連するイベントです。これらのイベントは、ページの読み込み、ウィンドウサイズの変更、スクロールなど、ブラウザの動作に応じて発生します。

ウィンドウイベントを活用することで、ユーザーの画面上で起こるさまざまな状況に対応し、ページを動的に制御することができます。以下に代表的なウィンドウイベントとその使い方について説明します。

ページ読み込み関連イベント

読み込み完了（load）

「読み込み完了イベント（load）」は、ページのすべてのコンテンツ（画像やスタイルシートなどを含む）が完全に読み込まれたときに発生します。このイベントは、ページが完全に準備された後に初期化の処理を行うために使用されます。

// ページが読み込まれたときにメッセージを表示する
window.addEventListener('load', function() {
  console.log('ページが完全に読み込まれました');
});

このコードにより、ページの読み込みが完了したときにコンソールにメッセージを表示することができます。

ページアンロード（beforeunload、unload）

「ページアンロードイベント（beforeunload、unload）」は、ユーザーがページを離れようとしたり、ウィンドウを閉じようとしたりしたときに発生します。beforeunloadを使うと、ページを離れる前に確認ダイアログを表示することができます。

// ページを離れようとしたときに警告を表示する
window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = 'このページを離れてもよろしいですか？';
});

このコードにより、ユーザーがページを離れる前に警告を表示し、確認を求めることができます。

ウィンドウサイズ変更イベント

リサイズ（resize）

「リサイズイベント（resize）」は、ブラウザのウィンドウサイズが変更されたときに発生します。ウィンドウサイズの変更に応じてレイアウトを調整する場合に使用されます。

// ウィンドウサイズが変更されたときに新しいサイズを表示する
window.addEventListener('resize', function() {
  console.log(`新しいウィンドウサイズ: 幅=${window.innerWidth}, 高さ=${window.innerHeight}`);
});

このコードにより、ウィンドウサイズが変更されるたびに新しいサイズがコンソールに表示されます。

タイミング関連のイベント一覧

タイマーイベントとは？

タイマーイベントは、指定した時間の後に特定の処理を実行したい場合に使用されます。JavaScriptでは、setTimeoutとsetIntervalという2つの関数を使用してタイマー関連の処理を実現できます。

タイマーイベントの種類

一度だけ実行（setTimeout）

「setTimeout」は、指定した時間が経過した後に一度だけ特定の処理を実行するために使用します。

// 3秒後にメッセージを表示する
setTimeout(function() {
  alert('3秒が経過しました');
}, 3000);

このコードにより、3秒後にアラートが表示されます。

繰り返し実行（setInterval）

「setInterval」は、指定した時間間隔ごとに繰り返し特定の処理を実行するために使用します。

// 2秒ごとにメッセージを表示する
const intervalId = setInterval(function() {
  console.log('2秒が経過しました');
}, 2000);

// 10秒後に繰り返しを停止する
setTimeout(function() {
  clearInterval(intervalId);
  console.log('繰り返しを停止しました');
}, 10000);

このコードにより、2秒ごとにメッセージが表示され、10秒後に繰り返しが停止されます。

イベントリスナーのベストプラクティス

イベントリスナーとは？

イベントリスナーは、特定のイベントが発生した際に、そのイベントに対応する処理を実行するために使用される関数です。イベントリスナーを使うことで、コードの再利用性を高め、ページ全体の動作をより効率的に管理できます。

イベントリスナーの使い方

addEventListenerメソッドを使用することで、イベントリスナーを設定できます。このメソッドは、特定の要素に対して、どのイベントが発生した際にどの関数を実行するかを定義します。

// ボタンにクリックイベントリスナーを追加する
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

このコードでは、ボタンがクリックされたときにコンソールにメッセージを表示します。

イベントリスナーの削除

不要になったイベントリスナーを削除することも可能です。これには、removeEventListenerメソッドを使用します。

// イベントリスナーの関数を定義する
function handleClick() {
  console.log('ボタンがクリックされました');
}

// イベントリスナーを追加する
button.addEventListener('click', handleClick);

// イベントリスナーを削除する
button.removeEventListener('click', handleClick);

このコードでは、最初にクリックイベントリスナーを追加し、その後に削除しています。

イベントデリゲーション

イベントデリゲーションとは？

イベントデリゲーションとは、親要素にイベントリスナーを設定して、子要素で発生するイベントを処理するテクニックです。この方法を使用すると、複数の子要素に対して個別にイベントリスナーを設定する必要がなくなり、パフォーマンスが向上します。

// 親要素にイベントリスナーを設定する
const parent = document.getElementById('parentElement');
parent.addEventListener('click', function(event) {
  if (event.target && event.target.matches('button.className')) {
    console.log('子要素のボタンがクリックされました');
  }
});

このコードにより、親要素にイベントリスナーを設定し、子要素のボタンがクリックされたときに処理を実行することができます。

まとめ

JavaScriptのイベントは、Webページをよりインタラクティブで使いやすくするために非常に重要な要素です。本記事では、JavaScriptの主要なイベントについて、その使い方や具体的なコード例を交えて解説しました。マウスイベント、キーボードイベント、フォームイベント、ウィンドウイベント、タイミング関連のイベントと、それぞれのイベントがどのように使われるかを理解することで、Web開発におけるインタラクションを効果的に実装することが可能になります。

イベントリスナーのベストプラクティスやイベントデリゲーションの活用方法も含め、効率的にコードを管理し、パフォーマンスを向上させる方法も学びました。これらの知識を使って、ユーザーが快適に操作できる魅力的なWebページを作成してください。