いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】イベント処理の書き方と使い方の基本

JavaScriptでユーザーの操作に反応するWebページを作る「イベント処理」の基本を解説します。イベントハンドラとイベントリスナーという2つの書き方の違いや、clickやinputなどよく使うイベントの種類を学び、サンプルコードで具体的な使い方をマスターします。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptのイベント処理の基本

イベント処理とは、ユーザーがボタンをクリックしたり、キーボードで文字を入力したりといった操作（これを「イベント」と呼びます）が発生したときに、あらかじめ決めておいた処理（関数）を実行する仕組みのことです。この仕組みを使うことで、ユーザーの操作に反応する動的なWebページを作成できます。JavaScriptでのイベント処理には、「イベントハンドラ」と「イベントリスナー」という2つの代表的な方法があります。

イベントハンドラとは

イベントハンドラとは、ボタンがクリックされた、あるいは入力欄に文字が入力された、といった特定のイベントが発生したときに、自動的に実行されるように設定された関数（処理）そのものを指します。

  • 役割： 特定のイベントが発生したときに、実行されるべき処理内容を定義した関数そのものです。
  • 使い方： HTMLの要素（DOM要素）が持つ、イベント用のプロパティ（例えば、クリックイベント用の onclick など）に、実行したい関数を直接代入して設定します。
  • 制限： 1つのイベントに対して、登録できるイベントハンドラは1つだけです。もし同じイベントに別のイベントハンドラを登録しようとすると、前の設定は消えてしまい、新しい設定で上書きされます。

イベントリスナーとは

イベントリスナーとは、特定のイベント（例えばクリックやキーボード操作など）が発生するのを常に監視し、そのイベントが起きたら登録しておいた処理（関数）を実行するための仕組み全体を指します。

  • 役割： 特定の要素でイベントが発生するのを待ち構え（リッスンし）、実際にイベントが起きたことを検知する機能や仕組みのことです。
  • 使い方： addEventListener() という専用のメソッドを使い、「どのイベント」に「どの処理」を実行させるかを指定して登録します。
  • 特徴： 1つのイベントに対して、複数の異なる処理を登録できます。後から処理を追加しても、前の処理が上書きされることはありません。そのため、イベントハンドラよりも柔軟な対応が可能です。

イベント処理の書き方

Webページ上のボタンクリックやキーボード入力といったユーザーの操作（イベント）に応じて、特定の処理を実行させる仕組みをイベント処理と呼びます。ここでは、JavaScriptにおける代表的な2つの書き方を解説します。

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

イベントハンドラは、HTML要素が持つプロパティ（onclickなど）に、実行したい関数を直接代入する方法です。

1const button1 = document.getElementById("click-btn");
2
3function handleClick() {
4  alert("ボタンがクリックされました！");
5}
6
7button1.onclick = handleClick;

このコードは、まずdocument.getElementById("click-btn")でHTML上にあるIDがclick-btnのボタン要素を取得します。次に、クリックされたときに実行する処理をhandleClickという名前の関数として定義しています。最後に、ボタン要素のonclickプロパティにhandleClick関数を代入することで、ボタンがクリックされたときにその関数が実行されるようになります。

イベントリスナーの書き方

イベントリスナーは、addEventListenerというメソッドを使って、特定のイベントが発生したときに実行される処理を登録する方法です。

1const button2 = document.getElementById("click-btn");
2
3button2.addEventListener("click", function () {
4  alert("ボタンがクリックされました！");
5});

このコードも同様に、まずdocument.getElementById("click-btn")でボタン要素を取得します。次に、addEventListenerメソッドを使います。第一引数にイベントの種類（この場合は"click"）を指定し、第二引数にイベントが発生したときに実行したい処理を関数として記述します。この書き方により、ボタンがクリックされたときに指定した処理が実行されます。

Webページは、ユーザーの操作やブラウザの状態変化に応じて、さまざまな動きをします。このユーザーの操作や状態の変化のことを「イベント」と呼びます。JavaScriptを使うと、このイベントが発生したタイミングを捉えて、あらかじめ用意しておいた処理を実行させることができます。

ここでは、システム開発の現場で頻繁に使われる代表的なイベントを一覧で紹介します。表にある「対応するハンドラ」は、HTMLの要素に直接処理を書き込む際に使われる属性名で、通常はイベント名の前に on が付きます。

よく使うイベント一覧

ユーザー操作に関するイベント

ウェブページ上のボタンや画像など、ユーザーがマウスを使って行う操作に関連するイベントです。ウェブアプリケーションの基本的な操作は、これらのイベントを使って作られています。

イベント名内容対応するハンドラ
click要素がクリックされたときonclick
dblclick要素がダブルクリックされたときondblclick
mousedownマウスボタンが押されたときonmousedown
mouseupマウスボタンが離されたときonmouseup
mouseoverマウスが要素の上に乗ったときonmouseover
mouseoutマウスが要素の上から離れたときonmouseout
mousemoveマウスが動いたときonmousemove

clickはマウスのボタンを押して離すまでの一連の動作を指しますが、mousedownとmouseupはそれぞれ「押した瞬間」と「離した瞬間」を個別に検知できます。ドラッグ＆ドロップのような機能を実装する際に便利です。

キーボードに関するイベント

ユーザーがキーボードのキーを押したり離したりした時に発生するイベントです。文字入力と連動する機能を作る際に使用します。

イベント名内容対応するハンドラ
keydownキーが押されたときonkeydown
keypressキーが押され続けているとき（非推奨）onkeypress
keyupキーが離されたときonkeyup

keydownはキーが押された瞬間に、keyupはキーから指が離れた瞬間に発生します。特定のキーが押されたことを検知して処理を行いたい場合によく使われます。なお、keypressは現在では非推奨となっており、代わりにkeydownを使うことが推奨されています。

フォーム関連のイベント

お問い合わせフォームやログイン画面など、ユーザーが情報を入力するフォームに関連するイベントです。入力された値のチェック（バリデーション）や、サーバーへのデータ送信のきっかけとして使われます。

イベント名内容対応するハンドラ
change入力内容が変化したときonchange
input入力欄に文字が入力されたときoninput
focus要素がフォーカスされたときonfocus
blurフォーカスが外れたときonblur
submitフォームが送信されたときonsubmit
resetフォームがリセットされたときonreset

changeは入力が確定したタイミング（例：テキストボックスからカーソルが外れた時）で発生するのに対し、inputは1文字入力されるたびに発生します。リアルタイムで入力文字数を表示するような機能ではinputが使われます。

ウィンドウやドキュメントの状態変化

ユーザーの直接的な操作ではなく、ブラウザのウィンドウやページ全体の読み込み状態が変化した時に発生するイベントです。

イベント名内容対応するハンドラ
loadページの読み込みが完了したときonload
unloadページが閉じられたときonunload
resizeウィンドウサイズが変更されたときonresize
scrollスクロールされたときonscroll

loadイベントは、画像などを含むすべての要素の読み込みが完了したタイミングで発生するため、ページの初期設定を行う処理を実行するのによく使われます。scrollイベントは、ユーザーがページをどれくらいスクロールしたかに応じて、特定の要素を表示・非表示にするといった演出に使われます。

その他のよく使うイベント

上記以外にも、特定の状況で役立つイベントがいくつかあります。

イベント名内容対応するハンドラ
contextmenu右クリックメニューが開かれたときoncontextmenu
touchstartタッチが始まったとき（モバイル）ontouchstart
animationendCSSアニメーションが終了したときonanimationend

contextmenuを使うと、独自の右クリックメニューを実装できます。touchstartはスマートフォンやタブレット向けのサイト開発でクリックの代わりによく使われます。animationendは、CSSで設定したアニメーションが終わった後に何らかの処理を行いたい場合に便利です。

サンプルコード

この章では、JavaScriptを使ってユーザーの操作（イベント）に応じてWebページを動的に変化させる方法を学びます。HTMLファイルがページの骨格を定義し、各JavaScriptファイルが特定の機能を受け持っています。

javascript/chapter20/index.html

このHTMLファイルは、これからJavaScriptで操作する要素を配置した、Webページの基本構造です。

  • h1やbuttonなどの各タグは、ページに表示される部品（要素）です。
  • id属性（例: id="title"）は、各要素に固有の名前をつけるためのもので、JavaScriptから特定の要素を指定する際の目印として使われます。
  • 末尾の<script>タグで、4つのJavaScriptファイルを読み込んでいます。defer属性は、HTMLの読み込みが完了してからJavaScriptを実行するためのおまじないです。これにより、JavaScriptがHTML要素を確実に見つけられるようになります。
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8  <body>
9    <h1 id="title">JavaScriptチュートリアル</h1>
10    <h2 id="subtitle">サブタイトル</h2>
11
12    <button id="click-btn">クリック</button><br />
13
14    <input type="text" id="name-input" placeholder="名前を入力" />
15    <p id="output"></p>
16
17    <label for="color-select">背景色を選んでください。:</label>
18    <select id="color-select" name="color-select">
19      <option value="white">白</option>
20      <option value="lightblue">水色</option>
21      <option value="lightgreen">緑</option>
22    </select>
23
24    <script src="./script01.js" defer></script>
25    <script src="./script02.js" defer></script>
26    <script src="./script03.js" defer></script>
27    <script src="./script04.js" defer></script>
28  </body>
29</html>
30

javascript/chapter20/script01.js

このスクリプトでは、ボタンがクリックされたときの動作を定義しています。

  • document.getElementById("click-btn")は、HTMLの中からidがclick-btnである要素（この場合はボタン）を探し出して取得する命令です。
  • addEventListener("click", ...)は、「クリック（click）というイベントが発生したら、指定した処理を実行する」という設定を行うためのものです。これを「イベントリスナーを登録する」と言います。
  • このコードでは、1つのボタンに対して2つのイベントリスナーが登録されています。
    1. 1つ目は、クリックされると「ボタンがクリックされました！」というアラートウィンドウを表示します。
    2. 2つ目は、クリックされるとid="title"の要素（h1タグ）を取得し、その文字色を赤に変更します。

このように、1つのイベントに対して複数の異なる処理を割り当てることが可能です。

1// ====================================
2// 1. click イベント：ボタンをクリックしたとき
3// ====================================
4
5const button = document.getElementById("click-btn");
6
7button.addEventListener("click", function () {
8  alert("ボタンがクリックされました！");
9});
10
11button.addEventListener("click", function () {
12  const heading = document.getElementById("title");
13  heading.style.color = "red";
14});
15

javascript/chapter20/script02.js

ここでは、マウスカーソルが特定の要素の上に乗ったり、離れたりしたときの動作を定義しています。

  • mouseoverイベントは、マウスカーソルが要素の領域内に入ったときに発生します。
  • mouseoutイベントは、マウスカーソルが要素の領域内から外に出たときに発生します。
  • まずid="subtitle"の要素（h2タグ）を取得します。
  • mouseoverイベントリスナーでは、マウスが乗ったときに文字色を青（blue）に変更します。
  • mouseoutイベントリスナーでは、マウスが離れたときに文字色を元の黒（black）に戻します。

これにより、ユーザーがサブタイトルにマウスを合わせると色が変わる、というインタラクティブな表現が実現できます。

1// ====================================
2// 2. mouseover イベント：マウスが乗ったとき
3// ====================================
4
5const subTitle = document.getElementById("subtitle");
6
7// マウスが要素に乗ったときに文字色を青に
8subTitle.addEventListener("mouseover", function () {
9  subTitle.style.color = "blue";
10});
11
12// マウスが要素から離れたときに元の色（黒）に戻す
13subTitle.addEventListener("mouseout", function () {
14  subTitle.style.color = "black";
15});
16

javascript/chapter20/script03.js

このスクリプトは、テキスト入力欄に入力があったときの動作をリアルタイムで処理します。

  • inputイベントは、<input>タグなどの入力フィールドの値が変更されるたびに発生します。キーを1文字入力するごとにイベントが発生します。
  • id="name-input"の入力欄と、id="output"のpタグをそれぞれ取得します。
  • inputイベントリスナーを登録し、入力欄の値が変更されるたびに、以下の処理を実行します。
    • 入力欄の現在の値（inputField.value）を取得します。
    • 「こんにちは、〇〇さん！」という文字列を作成し、pタグのテキストとして表示（output.textContent）します。

これにより、ユーザーが入力した内容が即座にページに反映されるようになります。

1// ====================================
2// 3. input イベント：テキストが入力されたとき
3// ====================================
4
5const inputField = document.getElementById("name-input");
6const output = document.getElementById("output");
7
8inputField.addEventListener("input", function () {
9  output.textContent = `こんにちは、${inputField.value}さん！`;
10});
11

javascript/chapter20/script04.js

ここでは、セレクトボックス（ドロップダウンリスト）の選択項目が変更されたときの動作を定義します。

  • changeイベントは、フォーム部品（セレクトボックス、チェックボックスなど）の選択状態が変更され、それが確定したときに発生します。
  • id="color-select"のselect要素を取得します。
  • changeイベントリスナーを登録し、選択項目が変更されるたびに、以下の処理を実行します。
    • 選択された項目のvalue属性の値（colorSelect.value）を取得します。HTML側で<option value="lightblue">のように定義されている値です。
    • 取得した値を、ページ全体の背景色（document.body.style.backgroundColor）に設定します。

これにより、ユーザーがセレクトボックスで色を選ぶと、ページの背景色が動的に変わる機能を実現できます。

1// ====================================
2// 4. change イベント：セレクトボックスの選択が変わったとき
3// ====================================
4
5const colorSelect = document.getElementById("color-select");
6
7colorSelect.addEventListener("change", function () {
8  document.body.style.backgroundColor = colorSelect.value;
9});
10

おわりに

この記事では、ユーザーの操作に応じて処理を実行するJavaScriptの「イベント処理」の基本を学びました。HTML要素のプロパティに直接関数を代入するイベントハンドラと、addEventListenerメソッドを使うイベントリスナーという2つの書き方があり、特に後者は複数の処理を登録できるため柔軟な実装が可能です。clickやinputなど、様々な種類のイベントを使い分けることで、サンプルコードで試したような動的なWebページが作成できますので、ぜひ色々なイベントを試してみてください。

【JavaScript】イベント処理の書き方と使い方の基本 | いっしー@Webエンジニア