JavaScript: addEventListenerでリスナー関数に引数を渡す
addEventListener()メソッドは、イベントターゲットにイベントリスナーを登録するメソッドです。 通常は次のように記述します。リスナー関数が「changeText()」として、
引数なし
// イベントリスナー登録(引数なし)
elem.addEventListener('click', changeText, false);
但し、これではリスナー関数に引数を渡すことができません。 引数を渡す場合は、関数式を使って次のように記述します。
引数あり
// イベントリスナー登録(引数あり)
elem.addEventListener('click', function(){changeText(引数)}, false);
// 複数行にすると見やすくなります。
elem.addEventListener('click', function(){
changeText(引数)
}, false);
サンプルコード
ボタンをクリックすると下に文字が表示されるプログラムです。
リスナー関数に、表示する文字を引数で渡しています。
コードは次の通りです。関数式を使って引数を渡しています。
<button id="btn">Button</button> <div id="txt"> </div> <script> var btn = document.getElementById('btn'); // イベントリスナー登録(引数あり) btn.addEventListener('click', function(){changeText('click !!')}, false); function changeText(str){ var div = document.getElementById('txt'); div.innerHTML = str; } </script>