トップページ >  JavaScript >  addEventListenerの使い方
初版2013/02/21: 最終更新日2013/03/08
  addEventListenerの使い方
目次
addEventListenerの使い方
サンプル
リスナー関数に引数を渡す
addEventListenerの使い方
addEventListenerは、同じオブジェクトに同じイベントで複数の関数を実行したい時などに便利なメソッドです。
また、色々なライブラリを読み込んでる場合でも同じイベントの干渉を気にしなくて良いというメリットがあります。
IE8以下では使用できませんが、Chromeでは使用できることを確認しています。
そのため、IEでエラーが起きないように記述するために以下のように書きます。

if(obj.addEventListener){
    // その他ブラウザ用
}else{
    // IE用
}

サンプル
以下、サンプルです。onclickイベントにdispMsg1,dispMsg2の二つのメソッドを実行するようにさせています。
この時、第一引数にはonclickのonを省いたclickを指定します。その他のイベントも同様にonは省きます。
別オブジェクトの確認ボタンを押すと、obj.addEventListenerをアラート表示しています。





以下、ソースです。

<script type="text/javascript">
window.onload = function() {
    if(oButton1.addEventListener){
        oButton1.addEventListener("click", dispMsg1, false);
        oButton1.addEventListener("click", dispMsg2, false);
        oButton2.addEventListener("click", dispMsg3, false);
    }
}

function dispMsg1() {
    alert("dispMsg1");
}

function dispMsg2() {
    alert("dispMsg2");
}
function dispMsg3() {
    alert(oButton2.addEventListener);
}
</script>

<input type="button" id="oButton1" value="ボタン" />
<input type="button" id="oButton2" value="確認ボタン" />

リスナー関数に引数を渡す
上記のイベント実行時には引数なしの関数がわたされています。
引数ありの関数を渡したい場合は無名関数を使用して、その中に実行したい関数を入れます。以下、例です。



以下、ソースです。

<script type="text/javascript">
window.onload = function() {
    if(oButton3.addEventListener){
        oButton3.addEventListener("click",function(){dispMsg4('引数です')}, false);
    }
}

function dispMsg4(msg) {
    alert(msg);
}
</script>

<input type="button" id="oButton3" value="ボタン" />