JavaScript入門 #15 - イベント処理

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScriptイベント

このシリーズについて

「JavaScript入門」第15回です。今回は、ユーザー操作に反応するイベント処理を扱います。

イベントとは

イベントは、クリック、入力、送信、読み込みなど、ブラウザ上で起きる出来事です。

画面を操作できるWebページは、イベントに反応するJavaScriptで作られています。

今回作るもの

ボタンをクリックすると、画面の数字が増えるカウンターを作ります。

Step 1: HTMLを用意する

events.html を作ります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>イベント処理</title>
  </head>
  <body>
    <p>カウント: <span id="count">0</span></p>
    <button id="incrementButton">増やす</button>

    <script src="events.js"></script>
  </body>
</html>

Step 2: ボタンを取得する

events.js で、ボタンと表示場所を取得します。

const countText = document.querySelector("#count");
const incrementButton = document.querySelector("#incrementButton");

console.log(countText);
console.log(incrementButton);

Consoleに要素が表示されれば、取得できています。

Step 3: clickイベントを登録する

addEventListener でクリック時の処理を登録します。

const countText = document.querySelector("#count");
const incrementButton = document.querySelector("#incrementButton");

let count = 0;

incrementButton.addEventListener("click", () => {
  count++;
  countText.textContent = count;
});

ボタンをクリックするたびに数字が増えれば成功です。

Step 4: inputイベントを試す

入力欄に文字を入れるたびに表示を更新します。

<input id="nameInput" type="text">
<p id="preview"></p>

const nameInput = document.querySelector("#nameInput");
const preview = document.querySelector("#preview");

nameInput.addEventListener("input", () => {
  preview.textContent = nameInput.value;
});

input イベントは、文字を入力するたびに発火します。

Step 5: イベント処理を関数に分ける

処理が長くなる場合は、関数に分けます。

function updateCount() {
  count++;
  countText.textContent = count;
}

incrementButton.addEventListener("click", updateCount);

ここでは updateCount() ではなく updateCount を渡します。括弧を付けると、その場で実行されます。

注意: addEventListener("click", updateCount()) と書くと、クリック前に関数が実行されます。関数そのものを渡す時は括弧を付けません。

よくあるエラー

エラーよくある原因確認する場所
addEventListener が読めない要素取得に失敗しているセレクタ
クリック前に実行される関数に () を付けたイベント登録
値が増えないlet count が毎回初期化される場所にある変数の位置

次のステップ

JavaScript入門 #16 - フォーム入力とバリデーション で、入力値を取得してチェックします。

まとめ

イベント処理では、HTML要素を取得し、addEventListener で操作に反応する処理を登録します。クリックなら click、入力なら input を使います。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR