JavaScriptのイベントとは？クリック・入力処理の基本を解説

Webページでは、ユーザーの操作に応じて動作を変える仕組みが必要になります。
たとえば次のような機能は、すべて「イベント」によって実現されています。

• ボタンをクリックするとメニューが開く
• フォームに入力すると内容をチェックする
• マウスを重ねると画像が変わる

このように、ユーザーの操作やブラウザで起こる出来事をきっかけに処理を実行する仕組みを イベント（Event） と呼びます。

この記事では、JavaScriptのイベントの基本として次の内容を解説します。

• イベントの基本概念
• イベントリスナー（Event Listener）
• クリックイベント
• 入力イベント
• 実務でよく使うイベントの種類

JavaScriptの基礎を理解するためにも重要な仕組みなので、基本から順番に整理していきます。

なお、JavaScriptの基本的な構造については以下の記事で詳しく解説しています。

関連記事
JavaScriptの基本構造とは？初心者向けに仕組みを解説

JavaScriptのイベントとは

JavaScriptのイベントとは、ブラウザ上で発生した出来事（トリガー）に応じて処理を実行する仕組みです。

イベントには次のようなものがあります。

例えば、ボタンがクリックされたときに処理を実行する場合は次のようになります。

ボタンがクリックされる
↓
JavaScriptがイベントを検知
↓
登録された処理が実行される

このような仕組みを利用することで、Webページにインタラクティブな動きをつけることができます。

なお、JavaScriptがどのようにブラウザ上で動くのかは、以下の記事で詳しく解説しています。

関連記事
JavaScriptの役割とは？Web制作における役割とできること

イベント処理の基本構造

JavaScriptのイベント処理は、主に次の3つの要素で構成されます。

一般的な構造は次のようになります。

要素.addEventListener("イベント名", 処理);

例

const button = document.querySelector("#btn");

button.addEventListener("click", function () {
  console.log("クリックされました");
});

処理の流れ

1. ボタンがクリックされる
2. clickイベントが発生
3. 登録された関数が実行される

このように、イベント発生 → 関数実行という流れになります。

関数の基本については以下の記事で解説しています。

関連記事
JavaScriptの関数とは？基本と使い方を徹底解説

addEventListenerとは

イベントを登録するためのメソッドが addEventListener() です。

基本構文は次の通りです。

要素.addEventListener("イベント名", 関数);

例

<button id="btn">クリック</button>

<script>
const button = document.querySelector("#btn");

button.addEventListener("click", function () {
  alert("ボタンがクリックされました");
});
</script>

処理内容

1. ボタン要素を取得
2. clickイベントを登録
3. クリックされたときにアラート表示

この方法は、現在のJavaScript開発で最も一般的なイベント登録方法です。

クリックイベント（click）

クリックイベントは、最もよく使用されるイベントの一つです。

ボタンなどの操作に使われます。

サンプルコード

<button id="btn">クリック</button>
<p id="text">まだクリックされていません</p>

<script>
const button = document.querySelector("#btn");
const text = document.querySelector("#text");

button.addEventListener("click", function () {
  text.textContent = "クリックされました";
});
</script>

処理の流れ

1. ボタンをクリック
2. clickイベントが発生
3. テキストが変更される

このようにイベントを使うことで、ページの内容を動的に変更できます。

DOM操作については次の記事でも詳しく解説しています。

関連記事
JavaScriptの基本構造とは？初心者向けに仕組みを解説

入力イベント（input）

フォーム入力に反応するイベントが inputイベント です。

入力内容に応じて処理を実行できます。

サンプルコード

<input id="name" type="text" placeholder="名前を入力">
<p id="result"></p>

<script>
const input = document.querySelector("#name");
const result = document.querySelector("#result");

input.addEventListener("input", function () {
  result.textContent = input.value;
});
</script>

動作

1. 入力欄に文字を入力
2. inputイベントが発生
3. 入力内容が画面に表示される

この仕組みは次のような機能に利用されます。

• リアルタイム入力チェック
• 検索フォーム
• 文字数カウント

イベントオブジェクト

イベントが発生すると、イベントオブジェクトが自動的に渡されます。

これにより、イベントの詳細情報を取得できます。

サンプルコード

<button id="btn">クリック</button>

<script>
const button = document.querySelector("#btn");

button.addEventListener("click", function (event) {
  console.log(event);
});
</script>

イベントオブジェクトからは次のような情報を取得できます。

• クリックされた要素
• マウスの位置
• キー入力の情報

よく使うイベント一覧

Web制作でよく使用されるイベントを整理します。

これらを組み合わせることで、さまざまなUIを実装できます。

イベントを使った簡単な実装例

クリックで表示を切り替える簡単な例です。

<button id="toggleBtn">表示切替</button>
<p id="message">表示されています</p>

<script>
const button = document.querySelector("#toggleBtn");
const message = document.querySelector("#message");

button.addEventListener("click", function () {
  if (message.style.display === "none") {
    message.style.display = "block";
  } else {
    message.style.display = "none";
  }
});
</script>

このコードでは、クリックによって要素の表示・非表示を切り替えています。

まとめ

JavaScriptのイベントは、ユーザー操作に応じて処理を実行する仕組みです。

重要なポイントを整理します。

• イベントは「クリック」「入力」などの出来事
• addEventListenerでイベントを登録する
• イベント発生時に関数が実行される
• クリックや入力など様々なイベントが存在する

イベントを理解することで、次のようなUIが実装できるようになります。

• ボタン操作
• フォーム入力チェック
• メニュー表示
• モーダル表示

JavaScriptを使ったWeb制作では、イベント処理は必須の基礎知識です。

関連記事

JavaScriptの基本構造とは？初心者向けに仕組みを解説

JavaScriptの関数とは？基本と使い方を徹底解説

JavaScriptの条件分岐（if文）とは？基本から解説

JavaScriptの繰り返し処理（for文）とは？基本から解説