JavaScriptのイベントリスナー: 基本から応用までを詳解

JavaScriptは、ユーザーの動作に対応するための強力なインタラクティブな機能を提供します。その中心的な役割を果たすのが「イベントリスナー」です。

JavaScriptのイベントリスナーとは？
イベントリスナーの例

JavaScriptのイベントリスナーとは？

イベントリスナーは、JavaScriptがブラウザの特定のイベント（クリックやキー押下、ページのロードなど）を検知し、特定のコードを実行するためのものです。これを使用すると、ユーザーがページ上の要素を操作したときに動作する動的なウェブサイトを作成することができます。

イベントリスナーは以下のように使用します。

element.addEventListener('event', function);

ここで、’event’は検知したいイベントの種類を表し（例：’click’、’mouseover’など）、functionはそのイベントが発生したときに実行したい関数を表します。

イベントリスナーの例

例１

例として、ユーザーがボタンをクリックしたときにメッセージを表示する簡単な例を挙げてみましょう。

<button id="myButton">クリックしてください</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});
</script>

このコードでは、IDが’myButton’の要素がクリックされたときに、’ボタンがクリックされました！’というアラートメッセージを表示します。

シンプルすぎてあまり意味ないですね。もう少し複雑な例を見てみましょう。

例２

<!-- ユーザーが入力するテキストボックスと、入力結果を表示する領域 -->
<input id="myInput" type="text" placeholder="何か入力してみてください">
<p id="output">ここに入力した内容が表示されます</p>

<script>
let inputField = document.getElementById('myInput');
let outputField = document.getElementById('output');

// テキストボックスに何か入力されたときのイベントリスナーを設定
inputField.addEventListener('input', function() {
  // 入力された内容を取得して、output領域に表示
  outputField.textContent = 'あなたが入力した内容：' + inputField.value;
});
</script>

ここに入力した内容が表示されます

この例では、テキストボックスに対して入力イベントのリスナーを設定しています。ユーザーがテキストボックスに何か入力すると、入力された内容が<p>タグの中に表示されます。

JavaScriptのgetElementById関数を使用して、HTML要素（この場合はテキストボックスと<p>タグ）を選択しています。この関数は、指定したIDのHTML要素を返します。

次に、addEventListener関数を使用してイベントリスナーを追加します。この関数は2つの引数を取ります。最初の引数は監視するイベントの種類（この場合は’input’）、二つ目の引数はイベントが発生したときに実行される関数です。この関数内で、入力された内容を取得して<p>タグの中に表示しています。

例３

更に複雑なイベントリスナーの例を紹介します。

<!-- ユーザーがクリックするボタンと、クリック回数を表示する領域 -->
<button id="myButton">クリックしてみてください</button>
<p id="clickCount">ボタンはまだクリックされていません</p>

<script>
let button = document.getElementById('myButton');
let clickCountField = document.getElementById('clickCount');
let clickCount = 0;

// ボタンがクリックされたときのイベントリスナーを設定
button.addEventListener('click', function() {
  clickCount++;
  clickCountField.textContent = 'ボタンが ' + clickCount + ' 回クリックされました。';
});
</script>

ボタンはまだクリックされていません

この例では、ボタンに対してクリックイベントのリスナーを設定し、クリックされるたびにクリック数をカウントアップして表示する機能を実装しています。

まず、getElementById関数を使用してボタンとクリック数を表示する領域をHTMLから選択しています。次に、clickCountという変数を用意して、ボタンがクリックされるたびにこの数値を増やします。

そして、addEventListener関数を使用してボタンのクリックイベントにリスナーを追加します。リスナーの中で、クリック数を増やし、その数値をテキストとしてクリック数表示領域に表示します。このように、イベントリスナーは特定のイベント（この場合はボタンのクリック）が発生したときに特定の操作（この場合はクリック数の増加と表示の更新）を行うための仕組みです。

例４

ユーザーがテキストエリアに入力するたびに文字数をカウントし、その結果を表示するコードを考えてみましょう。

<textarea id="inputField"></textarea>
<div id="output">文字数：0</div>

<script>
let inputField = document.getElementById('inputField');
let outputField = document.getElementById('output');

// テキストエリアの入力イベントのリスナーを設定
inputField.addEventListener('input', function() {
  // 入力された文字数を取得し、それをoutput領域に表示
  let numChars = inputField.value.length;
  outputField.textContent = '文字数：' + numChars;
});
</script>

文字数：0

まず、getElementById関数を使用してテキストエリアと出力領域をHTMLから選択します。次に、addEventListener関数を使用してテキストエリアの入力イベントにリスナーを追加します。

このリスナーでは、テキストエリアに入力されるたびに、入力された文字数をカウントし、その結果を出力領域に表示します。

JavaScript イベントリスナー

JavaScriptのイベントリスナーとは？

イベントリスナーの例

例１

例２

例３

例４

コメント