【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>
js
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>
js
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>
js
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;
}
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！