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>
JavaScript入門