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

JavaScriptでイベントリスナーにパラメーターを渡す方法について解説します。

JavaScriptでイベントリスナーにパラメーターを渡す方法がわからないのですが手順を教えていただけますか？

イベントリスナーにパラメーターを渡すにはaddEventListenerを使います。また、handleEventを使うことで、関数名を指定する必要がなく、第三引数に直接渡すことができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

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

イベントリスナーとは、特定のイベントが発生したときに呼び出される関数のことです。たとえば、ボタンをクリックしたときに呼び出される関数を設定する場合には、ボタン要素にイベントリスナーを追加する必要があります。

次に、イベントリスナーにパラメーターを渡す方法は基本的には、無名関数を使って実現できます。

addEventListener()を使って、イベントリスナーを設定する。この例では、buttonという名前のボタン要素を取得しています。

let button = document.querySelector('button');

2. イベントリスナーにパラメーターを渡すために、無名関数を作成する。

button.addEventListener('click', function(event) {
  // 無名関数内で処理を記述する
});

addEventListener()の第二引数に、無名関数を指定します。この無名関数内に、パラメーターを渡したい処理を記述します。

3. 無名関数内で、渡したいパラメーターを引数に指定する。

button.addEventListener('click', function(event, param) {
  // 無名関数内で処理を記述する
});

引数にパラメーターを追加します。ここでは、パラメーターにparamという名前を付けました。

4. addEventListener()の第三引数に無名関数を渡す。

button.addEventListener('click', function(event) {
  handleClick(event, 'hello');
});

最後に、addEventListener()の第三引数に、上で作成した無名関数を渡します。また、パラメーターに値を指定することで、無名関数内でパラメーターを利用することができます。

サンプルプログラムの紹介

以下は、サンプルプログラムになります。

let button = document.querySelector('button');

function handleClick(event, param) {
  console.log(event); // イベントオブジェクト
  console.log(param); // パラメーター
}

button.addEventListener('click', function(event) {
  handleClick(event, 'hello');
});

この例では、clickイベントが発生したときに、handleClick()関数が呼び出されます。handleClick()関数では、eventオブジェクトとパラメーターの値をconsole.log()でコンソールに出力しています。

リスナー関数に相当するhandleEventメソッドを持たせる

handleEvent()は、イベントリスナーで使用することができる汎用的なメソッドです。handleEvent()を使うことで、関数名を指定する必要がなく、addEventListener()の第三引数に直接渡すことができます。

以下は、handleEvent()を使用した例です。

const obj = {
  name: 'JavaScript',
  handleEvent(event) {
    console.log(`Hello, ${this.name}!`);
    console.log(`Type: ${event.type}`);
    console.log(`Target: ${event.target}`);
  }
}

const button = document.querySelector('button');
button.addEventListener('click', obj);

この例では、objオブジェクト内にhandleEvent()メソッドが定義されています。handleEvent()メソッド内では、objオブジェクトのnameプロパティと、受け取ったイベントオブジェクトのtypeとtargetをコンソールに出力しています。

addEventListener()の第三引数にobjオブジェクトを渡していますが、この場合はhandleEvent()メソッドが呼び出されます。

handleEvent()を使うことで、コードを簡潔にすることができます。また、この方法を使えば、addEventListener()に渡す関数を毎回定義する手間を省くことができます。

以上が、handleEvent()についての解説です。handleEvent()を使うことで、よりシンプルなコードを書くことができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

イベントリスナーにパラメーターを渡す方法について解説しました。

イベントリスナーにパラメーターを渡すには、関数内でイベントオブジェクトを受け取り、それ以外にも渡したいパラメーターがあれば、アロー関数やbind()メソッドを使って渡すことができます。
イベントオブジェクト以外のパラメーターを渡す場合、アロー関数で渡す場合は、addEventListener()の第二引数にアロー関数を渡し、bind()メソッドで渡す場合は、bind()メソッドの第二引数以降に渡します。
イベントリスナーに渡す関数は、addEventListener()の第二引数に渡すことができますが、addEventListener()の第三引数に直接関数を渡すこともできます。
handleEvent()メソッドを使えば、イベントリスナーに渡す関数を毎回定義する手間を省くことができます。

イベントリスナーにパラメーターを渡す方法がよくわかりました。ありがとうございます。

イベントリスナーにパラメーターを渡す方法は、無名関数を使って実現できます。パラメーターには、イベントオブジェクト以外の値を渡すこともできます。
また、addEventListener()の第三引数に直接関数を渡す場合は、引数がない関数を渡すことができるため、不必要な引数を渡さないように注意してください。