基本知識

【JS第8回】イベントリスナーとクリック処理

JavaScript基礎講座 全10回（第8回）

【JS第8回】イベントリスナーとクリック処理

ユーザーの動作に反応する「生きたページ」を作成します。クリックイベントなどを常に待ち受けて監視するイベントリスナー（addEventListener）の記述ルールと実践テクニックを学びましょう。

📌 JavaScript講座ロードマップ一覧（クリックで移動）

1. イベント（Event）とイベントリスナー

Webサイト上において、ユーザーが行うあらゆるアクション（ボタンをクリックする、キーボードのキーを押す、画面をスクロールする、入力フォームを送信する、等）を **「イベント（Event）」** と呼びます。

JavaScriptで「ボタンがクリックされた時に、この処理を動かす」といった命令を構築するには、要素に対してイベントを待ち伏せて監視する**耳（Event Listener = イベントリスナー）**を取り付けます。これに用いられる標準的な命令が `addEventListener()` です。

2. addEventListener の基本書式

イベントリスナーは、対象の要素オブジェクトに対して以下のように記述します。 

要素オブジェクト.addEventListener("イベント名", () => {
    /* イベントが検知された時に実行したい処理（コールバック関数） */
});
  • イベント名（第1引数）: ダブルクォーテーションで囲んだ文字列で指定します。クリックの場合は `”click”`、入力を検知する場合は `”input”` などがあります。
  • 処理関数（第2引数）: イベント発生時に呼び出される処理を、アロー関数などの形式で直接記述します。

⚠️ 注意：イベント名に「on」は不要

HTMLタグに直接書く `onclick` 属性などの古い記述名と混同し、`addEventListener(“onclick”, …)` と書いてしまう初心者のミスが多発します。addEventListenerの中では **`click`** のように、頭の「on」を省いた純粋なイベント名を指定してください。

3. 実務でよく使われる代表的なイベント名

Web制作において、クリック以外によく監視されるイベントは以下の通りです。

  • click: 要素がクリック（またはスマホでタップ）された時。
  • input: テキストボックスに文字が1文字入力または削除されるたびにリアルタイムで発火。
  • submit: お問い合わせフォームの送信ボタンが押され、データ送信処理が走る時。
  • DOMContentLoaded: HTMLの構築が完全に完了し、JavaScriptからすべてのDOM要素が安全に触れる状態になった瞬間（JSの起動の起点によく使われます）。

4. ボタンを押すとテキストが変わる処理

以下のコードを記述すると、ボタン（ID: `action-btn`）がクリックされるのを監視し、クリックされるたびに見出し（ID: `status-text`）の文言を動的に切り替えます。

script.js 
/* 1. 操作する要素を取得する */
const btn = document.querySelector("#action-btn");
const text = document.querySelector("#status-text");

/* 2. ボタンにクリックイベントの耳を取り付ける */
btn.addEventListener("click", () => {
    /* クリックされた時のアクション：テキストを書き換え、文字色を赤にする */
    text.textContent = "ボタンがクリックされました！";
    text.style.color = "#ef4444";
});
✍️ 第8回 理解度チェック（問題）

要素にイベントリスナーを追加するメソッド「addEventListener」において、第1引数の文字列に「要素がクリックされた時」を指定したい場合、指定するべき正しいイベント名の文字列は何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第8回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • Web上のあらゆるアクションを「イベント」と呼び、それを検知するのが「イベントリスナー」。
  • `addEventListener()` の第1引数には “on” をつけない生のイベント名（”click” など）を指定する。
  • 第2引数に渡したアロー関数の中に、イベントが発生した時に実行したいDOM操作処理を記述する。

次回（第9回）は、一歩進んだプログラミング概念である「非同期処理とAPIデータ取得の基礎」をテーマに、サーバーからデータを取り出してリアルタイムでページを表示する仕組みを学びます。お楽しみに！

📖 JavaScriptの基礎を全10回でマスターする

🔑 第8回 理解度チェックの解答と解説

【解説】

正解は **`”click”`** です。 要素のタグに直接インラインで記述する属性（例: `onclick=”…”`）と混同して `”onclick”` と書いてしまうケースが非常に多いですが、`addEventListener` の引数には `”onclick”` ではなく頭の `on` を取った **`”click”`** を指定しなければ動作しません。イベント発生時の記述ルールとしてしっかりと区別して暗記しましょう。

関連記事