【JavaScript入門】イベントリスナの関数に引数を渡す方法3選

方法１：イベントオブジェクトだけあれば良い場合
方法２：イベントオブジェクトの他にも値を渡したい場合１
方法３：イベントオブジェクトの他にも値を渡したい場合２

方法１：イベントオブジェクトだけあれば良い場合

引数が要らず、イベントオブジェクトに対して何らかの処理を行いたい場合は以下のように記述することが出来ます。
イベントオブジェクトを関数側で受け取るにはlistener(e)とする必要があります。
以下の処理は、ボタンを押すと、ボタン名がそのボタンを押下した回数に変わり、その下に合計回数を出力するサンプルです。

See the Pen
watasu1 by shiakisudev (@shiakisu)
on CodePen.

HTML

<button id="btn">ボタン1</button>
<button id="btn2">ボタン2</button>
<div id="output"></div>

let obj = document.getElementById("output");
let cnt = 0;
document.getElementById("btn").addEventListener('click',listener,false);

document.getElementById("btn2").addEventListener('click',listener,false);

function listener(e){
  let i = ++cnt;
  e.target.textContent =  i;
  obj.innerHTML = i;
}

方法２：イベントオブジェクトの他にも値を渡したい場合１

以下のように記述するとイベントオブジェクトの他にも値を渡すことが出来ます。
以下の処理は、ボタン1を押すとボタンの色が赤色に、ボタン2を押すとボタンの色が青色に変わるサンプルです。

See the Pen
watasu3 by shiakisudev (@shiakisu)
on CodePen.

HTML

<button id="btn">ボタン1</button>
<button id="btn2">ボタン2</button>

document.getElementById("btn").addEventListener('click',function(e){
  listener(e,"red");
},false);

document.getElementById("btn2").addEventListener('click',function(e){
  listener(e,"skyblue");
},false);

function listener(e,color){
    e.target.style.backgroundColor = color;
}

方法３：イベントオブジェクトの他にも値を渡したい場合２

以下のように記述するとスマートです。

See the Pen
watasu2 by shiakisudev (@shiakisu)
on CodePen.

HTML

<button id="btn">ボタン1</button>
<button id="btn2">ボタン2</button>

document.getElementById("btn").addEventListener('click',listener("red"),false);
document.getElementById("btn2").addEventListener('click',listener("skyblue"),false);

function listener(color){
  return function(e){
    e.target.style.backgroundColor = color;
  }
}