javascript addEventListenerのコールバック関数に引数を渡す

javascript addEventListenerのコールバック関数に引数を渡す

javascriptで、addEventListenerのコールバック関数に引数を渡すサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81

引数を渡す

コールバック関数で使用する引数は、基本的にはコールバックを呼び出す側で決まっているため、引数を自由に指定することができませんが「handleEvent」をメソッドとしたオブジェクトを使用することで、渡すことができます。

<button id="main">変更</button>

<script>

'use strict';

document.getElementById('main').addEventListener('click',{
  name: 'tanaka',
  handleEvent: function (event) {
    console.log(this.name)
  }
});

</script>

実行結果を確認しても、ちゃんと「name」に指定した値が取得できていることが確認できます。