JavaScript：イベントリスナーとは？３分でわかりやすく解説

Webページ上のユーザーアクション（クリックやキーワード操作）を捉え、それに反応して特定の動作を実行する仕組みがイベントリスナーです。

わかりやすい言葉で言い換えると、Webページがユーザーの行動やブラウザの変化に耳を傾け、指示された反応をする仕組みだと言えるかもしれません。

イベントリスナーを適切に利用することにより、Webサイトやアプリケーションに対してインタラクティブな体験を提供することが可能になります。この記事では、イベントリスナーの基本から、具体的な使用方法・コーディング方法まで、初心者でも理解しやすいように段階的に解説していきます。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

イベントとは？

イベントとはユーザーがマウスやブラウザから特定のアクションを行うことです。マウスをクリックしたり、キーボードのキーを押したり。また、ページが読み込まれたり、ウインドウ（画面サイズ）がリサイズされるといったブラウザの動作などがその一例です。

イベントの種類	イベント名	説明
ユーザーイベント	クリックイベント	ユーザーがマウスでページ上の要素をクリックしたときに発生します。
ユーザーイベント	キーボードイベント	ユーザーがキーボードのキーを押下または解放したときに発生します。
ユーザーイベント	フォームイベント	フォームが送信されたり、入力フィールドの値が変更されたりしたときに発生します。
ブラウザイベント	ロードイベント	ページや画像が完全に読み込まれたときに発生します。
ブラウザイベント	リサイズイベント	ウィンドウのサイズが変更されたときに発生します。
ブラウザイベント	スクロールイベント	ユーザーがページをスクロールしたときに発生します。

これらのイベントは、Webページ上で発生する様々なユーザー行動やブラウザ状態の変化を表します。JavaScriptを使ってこれらのイベントを検出し、適切な応答をプログラムすることで、Webページをよりインタラクティブでユーザーフレンドリーなものにすることが可能です。

イベントリスナーとは？

イベントリスナーとは、特定のイベントが発生したときに実行される関数や処理のこと・その仕組みを指します。経てばユーザが「クリック」したら、入力チェックを行う・・・というような仕組みのこと。

参考　JavaScriptの関数

イベントリスナーはWebページ上の動的なインタラクションを可能にする概念の１つで、ユーザーがページ上で行う様々なアクション（例えば、クリックやキーボードの入力など）を捉え、それに応じた特定の反応をプログラムすることができます。

イベントリスナーの仕組み

イベントリスナーは、以下のような手順で機能します。詳しい仕組み後ほど解説するので、ここではイベントリスナーという仕組みの動作原理についての概要を押さえておきましょう。

1. イベントリスナーの登録
   • まずは、特定のイベントに反応するようにイベントリスナーを登録します。これは、対象となる要素に対して、監視したいイベントタイプと、そのイベントが発生したときに呼び出されるコールバック関数を指定します。
2. イベントの監視
   • イベントリスナーが登録されると、ブラウザは指定されたタイプのイベントがその要素で発生するのを監視し始めます。
3. イベントの発生と処理の実行
   • 対象のイベントが発生すると、ブラウザは事前に登録されたコールバック関数を呼び出し、プログラムされた処理を実行します。

イベントリスナーの使用例

JavaScriptでは、addEventListenerメソッドを使用するのがイベントリスナーを登録する基本的な方法の１つです。このメソッドは、対象の要素、イベントタイプ、そしてイベントが発生した際に実行される関数を引数に取ります。例えば、ボタンがクリックされたときにアラートを表示するイベントリスナーは次のように書くことができます。

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

↑のコードは、ID：myButtonの要素に対してクリックイベントリスナーを追加しています。ボタンがクリックされると、アラートが表示されるというシンプルな処理を行っています。

このように、ユーザの何か特定の処理を「イベント」として検知し、そのイベントに対応する処理を記述することで様々な動的な画面制御を行うことができるようになるのが、このイベントリスナーという仕組み・概念です。

イベントリスナーの追加：addEventListener

イベントリスナーを追加するためのメソッドはaddEventListenerです。このメソッドを使用することで、特定の要素にイベントを監視するリスナーを登録できます。

ポイント　addEventListenerメソッドの構文

element.addEventListener(event, function, useCapture);

1. element: イベントリスナーを追加したいDOM要素
2. event: 監視するイベントの名前（例: 'click', 'mouseover'）
3. function: イベントが発生したときに実行されるコールバック関数
4. useCapture (オプション): イベントキャプチャを使用するかどうかのブール値。デフォルトはfalseで、イベントバブリングのフェーズでリスナーが動作

さっそく具体的に１からイベントリスナーを登録する方法を見ていきましょう。

ステップ1　対象となる要素を選択する

まず、イベントリスナーを追加したいHTML要素をJavaScriptを使って選択します。例えば、IDがmyButtonのボタン要素を選択するには、次のようにします。

var button = document.getElementById('myButton');

参考　JavaScript変数：var

ステップ2　addEventListenerメソッドを使用してイベントリスナーを追加する

次に、addEventListenerメソッドを使用して選択した要素にイベントリスナーを追加します。例えば、ボタンがクリックされたときにアラートを表示するには、次のように記述します。

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

↑のコードは、myButtonIDを持つボタンがクリックされたときに、アラートを表示するイベントリスナーを追加します。

サンプルコード　マウスオーバーイベントの追加

マウスが特定の要素の上に移動したときに反応するイベントリスナーを追加する例を見てみましょう。

var myElement = document.getElementById('myElement');

myElement.addEventListener('mouseover', function() {
    myElement.style.backgroundColor = 'yellow';
});

↑のコードは、IDがmyElementの要素にマウスが乗ると、その要素の背景色を黄色に変更します。

サンプルコード　フォーム送信イベントの追加

フォームが送信されたときにカスタム処理を実行するイベントリスナーを追加する例です。

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトのフォーム送信を防止
    alert('フォームが送信されました！');
});

↑の例では、フォーム送信イベントが発生した際に、ブラウザによるデフォルトの送信処理をpreventDefaultメソッドでキャンセルし、代わりにアラートを表示しています。

addEventListenerメソッドを使用することで、様々なイベントに対して柔軟に対応することができます。イベントリスナーの追加は、Webページをよりインタラクティブでユーザーフレンドリーにする上で重要な役割を果たします。

イベントリスナーの削除：removeEventListener

イベントリスナーの追加と同様に重要なのが不要になったイベントリスナーを削除することです。イベントリスナーが不要になるのは、例えばユーザーが特定の操作を完了した後や、ページの特定の部分が非表示になった時などです。イベントリスナーを削除することで、メモリリークを防ぎ、アプリケーションのパフォーマンスを維持することが可能になります。

ポイント　removeEventListenerメソッド

イベントリスナーを削除するためには、removeEventListenerメソッドを使用します。このメソッドの構文はaddEventListenerに似ていますが、イベントを削除するだけです。

element.removeEventListener(event, function, useCapture);

1. element: イベントリスナーを削除したいDOM要素
2. event: 削除したいイベントの名前
3. function: 削除したいイベントリスナーに紐づけられている関数
4. useCapture: イベントリスナーがキャプチャフェーズで登録されているか、バブリングフェーズで登録されているかを示すブール値。addEventListenerと同じ値を指定する必要があります。

イベントリスナーの削除：具体例

イベントリスナーを削除する際には、addEventListenerで指定したのと同じ関数をremoveEventListenerに渡す必要があります。これは、無名関数を直接addEventListenerに渡す代わりに、関数を変数に割り当てておくとよいでしょう。

var button = document.getElementById('myButton');
var handleClick = function() {
    alert('ボタンがクリックされました！');
};

// イベントリスナーを追加
button.addEventListener('click', handleClick);

// イベントリスナーを削除
button.removeEventListener('click', handleClick);

↑の例では、handleClick関数がクリックイベントのコールバックとして使用されています。イベントリスナーを削除する際も、同じhandleClick関数をremoveEventListenerメソッドに渡しています。これにより、正確に特定のイベントリスナーを削除することができます。

イベントリスナーの追加だけでなく、適切なタイミングでの削除もWebアプリケーションの効率的な動作には不可欠です。addEventListenerとremoveEventListenerを適切に使用することで、ユーザーインターフェースのコントロールを精密に行い、リソースを効率的に管理することが可能になります。