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

生徒

「先生、JavaScriptでボタンをクリックしたときに動く処理を作りたいです。でもどう書けばいいのかわかりません。」

先生

「それなら、addEventListenerを使うと便利です。ボタンに『クリックされたらこの処理をしてね』と教える仕組みです。」

生徒

「『addEventListener』って少し難しそうですが、具体的にはどう書くんですか？」

先生

「順番に見ていきましょう。まずHTMLのボタンを用意して、JavaScriptで処理を追加します。」

1. addEventListenerとは？

JavaScriptのaddEventListenerは、特定の要素に対して「イベントが起きたらこの処理をしてください」と指示する命令です。ここでいうイベントとは、ユーザーがボタンをクリックしたり、文字を入力したりする動作のことを指します。

イベントリスナーを使うと、HTMLに直接書くよりも整理されたコードを書けるので、プログラムの管理が楽になります。

2. 基本的な使い方

例えば、ボタンをクリックしたときにアラートを表示する場合の基本形は以下の通りです。


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

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

ここでは、まずgetElementByIdでHTMLのボタン要素を取得しています。その後addEventListenerを使って「クリックされたらアラートを出す」という処理を設定しています。

3. イベントの種類

よく使われるイベントには次のようなものがあります。

click：クリックされたとき
mouseover：マウスが要素に乗ったとき
mouseout：マウスが要素から離れたとき
input：テキスト入力などが変更されたとき
keydown：キーを押したとき

イベントの種類によって、処理を使い分けることができます。

4. イベントオブジェクトの利用

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


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

これでユーザーの操作をより詳しく制御することができます。

5. 複数のイベント処理を追加する

1つの要素に対して複数の処理を追加することも可能です。例えば、マウスが乗ったときと離れたときで色を変える例です。


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

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

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

このように複数のaddEventListenerを設定すると、柔軟な動きを作ることができます。

6. イベント処理のメリット

イベントリスナーを使うと、HTMLを直接編集するよりも、次のようなメリットがあります。

HTMLとJavaScriptを分けて管理できる
複数のイベント処理を同じ要素に追加できる
イベントオブジェクトを使って詳細な制御ができる

初心者の方は、まずクリックやマウス操作など、簡単なイベントから試すと理解しやすいです。

7. よくある注意点

イベントリスナーを書くときには注意が必要です。

同じイベントを大量に設定すると、処理が重くなることがあります。
イベントバブリングと呼ばれる、子要素で起きたイベントが親要素にも伝わる仕組みに注意する必要があります。
必要に応じてevent.stopPropagation()でイベントの伝播を止めることができます。

8. 実践的な例

最後にフォーム入力に文字数カウントを追加する例を見てみましょう。


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

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

これで、文字を入力するとリアルタイムで文字数が表示されます。実際に手を動かして動作を確認すると理解が深まります。