【JavaScript】イベントリスナー・コールバック関数とは？

JavaScript(ジャバスクリプト)

2023.08.24

JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。

イベントリスナーとは？
コールバック関数とは？
まとめ

イベントリスナーとは？

JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が発生します。これには、ボタンがクリックされたり、キーが押されたり、ページが読み込まれたり、などが含まれます。イベントリスナーは、これらのイベントを「聞き」、特定のイベントが発生したときに実行される処理（コード）を設定します。

JavaScriptの addEventListener メソッドを使うことで、特定のイベントが発生したときに呼び出される関数（通常はコールバック関数）を指定することができます。

element.addEventListener(event, callback, useCapture);

element は、イベントリスナーを登録するDOM要素です。
event は、イベントの種類です。
callback は、イベントが発生したときに実行される関数です。
useCapture は、イベントを捕捉モードで登録するかどうかのフラグです。

イベントリスナーを登録すると、イベントが発生したときに、指定された関数が呼び出されます。コールバック関数は、イベントリスナーの一種であるため、イベントリスナーを登録する方法と同じ方法で登録できます。

イベントリスナーは、Webページのユーザーインターフェイスを操作したり、イベントが発生したときに特定の処理を実行したりするために使用されます。たとえば、ボタンをクリックしたときに、新しいページを表示するイベントリスナーを登録することができます。

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

この例では、ボタンがクリックされると、”ボタンがクリックされました！”とコンソールにログ出力します。

コールバック関数とは？

コールバック関数とは、イベントリスナーの一種です。イベントが発生したときに、指定された関数を呼び出すものです。コールバック関数は、他の関数に引数として渡され、その他の関数の実行が完了した後で実行されます。

コールバック関数は、非同期処理（例えば、サーバーからデータをフェッチするなど）の結果を処理したり、イベントリスナー（前述）によって特定のイベントが発生したときに実行する処理を定義したりするのに使用されます。

この例では、fetchData関数にコールバック関数が引数として渡され、データのフェッチ処理が完了した後に実行されます。このコールバック関数はデータをコンソールにログ出力します。

function fetchData(callback) {
    // データのフェッチ処理...
    callback(data);
}

fetchData(function(data) {
    console.log("データ: ", data);
});

このコードは、クラス名が.alinkで指定されたすべての要素に対してクリックイベントリスナーを追加します。クリックイベントが発生した場合、対応するリンクURLをlinks配列から取得し、リンクのhref属性に設定します。

var aLinks = document.querySelectorAll(".alink");
var links = ["https://example1.com", "https://example2.com", "https://example3.com"];
for (let j = 0; j < aLinks.length; j++) {
  aLinks[j].addEventListener("click", (function(j) {
    return function() {
      var aTag = this.parentNode;
      aTag.href = links[j];
    };
  })(j));
}

以下の部分がコールバック関数となります。

aLinks[j].addEventListener("click", (function(j) {
  return function() {
    var aTag = this.parentNode;
    aTag.href = links[j];
  };
})(j));

addEventListenerメソッドの第二引数として無名の関数が渡されています。これは即時に実行される関数 (IIFE: Immediately Invoked Function Expression) として定義されています。このIIFEはクロージャを作成し、クリックイベントが発生した時に実行されるコールバック関数を返します。

コールバック関数は、イベントが発生した要素の親要素を取得し、それに対応するリンクURL（links[j]）を設定しています。このように、クリックイベントごとに異なるインデックス（jの値）を参照することができます。これによって、複数の要素に対して適切なリンクが設定されることが保証されます。