先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptのイベント処理って何ですか？聞いたことはあるけど、よくわからなくて…」

先生

「イベント処理とは、ユーザーがボタンをクリックしたり、文字を入力したりしたときに、プログラムが反応して処理を行う仕組みのことです。」

生徒

「クリックとか入力したら反応するってことですか？」

先生

「そうです。例えば、ボタンを押したらメッセージが表示される、マウスを動かしたら画面に何かが表示される、そんな動きです。」

生徒

「なるほど。でもどうやってJavaScriptでそれを作るんですか？」

先生

「JavaScriptではイベントリスナーという仕組みを使います。イベントリスナーは、『この要素に何かが起きたら、この処理をしてください』とプログラムに伝えるものです。」

1. イベント処理の基本概念

JavaScriptのイベント処理は、ユーザーの操作やブラウザの状態の変化に応じて、特定の処理を自動で行う仕組みです。例えば、ボタンをクリックしたらアラートを表示する、ページが読み込まれたら初期値をセットする、といったことが可能です。

このとき使うのが「イベント」と「イベントリスナー」です。イベントとは、ユーザーの行動やブラウザの動きのことを指します。クリック、マウス移動、キー入力、ページ読み込みなどがイベントの例です。イベントリスナーは、そのイベントが起こったときに呼ばれる関数（処理）のことです。

2. 代表的なイベントの種類

JavaScriptでよく使われるイベントの種類をいくつか紹介します。

click：ボタンやリンクがクリックされたとき
input：テキスト入力やフォームに値が入力されたとき
mouseover：マウスが要素に乗ったとき
keydown：キーを押したとき
load：ページや画像が読み込まれたとき

イベントはこのようにユーザーの操作やブラウザの状態に合わせて発生します。次に、実際にどうやって処理を書くかを見ていきましょう。

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

JavaScriptではaddEventListenerという関数を使って、イベントに反応する処理を設定します。例えば、ボタンをクリックしたらメッセージを表示する例です。


const button = document.getElementById("myButton");

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

このコードでは、myButtonというIDを持つボタン要素を取得し、クリックされたときにアラートを表示する処理を設定しています。

4. イベントリスナーのメリット

イベントリスナーを使うと、HTML側に直接onclick属性を書かなくても、JavaScriptで自由に処理を追加できます。これにより、HTMLとJavaScriptの役割を分けて、コードを整理しやすくなります。

さらに、一つの要素に複数のイベント処理を追加できるので、拡張性の高いプログラムが作れます。

5. イベントオブジェクトについて

イベントリスナーに渡される関数には、通常eventオブジェクトが自動で渡されます。このオブジェクトを使うと、どのキーが押されたか、マウスの位置はどこか、などの情報を取得できます。


document.addEventListener("keydown", function(event) {
  console.log("押されたキー:", event.key);
});

上記では、どのキーが押されたかをコンソールに表示しています。イベントオブジェクトを活用すると、より細かい条件で処理を制御できます。

6. よく使うイベント処理の例

いくつか簡単な例を紹介します。

マウスオーバーで文字色を変える例：


const text = document.getElementById("myText");

text.addEventListener("mouseover", function() {
  text.style.color = "red";
});

text.addEventListener("mouseout", function() {
  text.style.color = "black";
});

フォーム入力時に文字数を表示する例：


const input = document.getElementById("myInput");
const count = document.getElementById("charCount");

input.addEventListener("input", function() {
  count.textContent = "文字数: " + input.value.length;
});