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

• 作成日 2021.03.27
• 更新日 2022.08.10
• javascript
• javascript

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

目次

• 1. 環境
• 2. 引数を渡す

環境

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

Javascript サンプル集はこちら

引数を渡す

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

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

<script>

'use strict';

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

</script>

use strictについてはこちら

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

• 前の記事
  

  python EXCELのシート名を全て取得する 2021.03.27

• 次の記事
  

  docker-compose up時にエラー「ERROR: Top level object in ‘./docker-compose.yml’ needs to be an object not ‘‘.」が発生した場合 2021.03.27