JavaScriptでイベントリスナーにパラメータを渡す方法

JavaScriptでイベントリスナーにパラメータを渡す方法について、いくつかの方法を紹介します。

関数を介してパラメータを渡す方法: イベントリスナーに渡す関数を定義し、その関数内で必要なパラメータを使用することができます。例えば、以下のようなコードです:

function handleClick(param) {
  console.log('Clicked with parameter:', param);
}
const button = document.querySelector('button');
button.addEventListener('click', () => handleClick('example'));

このコードでは、handleClick関数が定義され、その関数にはパラメータparamが渡されます。イベントリスナー内で、handleClick関数を呼び出す際に、パラメータとして'example'を渡しています。

クロージャを使用してパラメータを渡す方法: クロージャを使うことで、イベントリスナー内で定義された関数が外部スコープの変数にアクセスできます。以下は例です:

const button = document.querySelector('button');
function createClickListener(param) {
  return function() {
    console.log('Clicked with parameter:', param);
  }
}
button.addEventListener('click', createClickListener('example'));

このコードでは、createClickListener関数が定義され、その関数はクロージャを返します。クロージャ内の関数は、外部スコープから渡されたパラメータparamにアクセスできます。

イベントオブジェクトを使用してパラメータを渡す方法: イベントオブジェクトを使用することで、イベントリスナー内で発生したイベントに関する情報を取得できます。以下は例です:

function handleClick(event) {
  const param = event.target.dataset.param;
  console.log('Clicked with parameter:', param);
}
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

このコードでは、handleClick関数はイベントオブジェクトを受け取り、その中から必要なパラメータを取得しています。例では、ボタンのdata-param属性を使用してパラメータを指定しています。