JavaScript Example - オブジェクトの機能を拡張する -

オブジェクトに対してイベントリスナーを追加・削除するaddEventListener・removeEventListenerというメソッドは、モダンなブラウザであればサポートされていますが、IEではサポートされていません。
以下の例では、IEの場合のみaddEventListener・removeEventListenerメソッドを追加し、その後はFirefoxなどと同じように操作できるようにしたものです。

前回のサンプルと比較してみてください。

function eventListener1()
{
    alert("eventListener1が呼び出されました。");
}

function eventListener2()
{
    alert("eventListener2が呼び出されました。");
}

function addListener(eventType, eventListener)
{
    if(this.attachEvent){
        this.attachEvent("on"+eventType, eventListener);
    }
}

function removeListener(eventType, eventListener)
{
    if(this.detachEvent){
        this.detachEvent("on"+eventType, eventListener);
    }
}

window.onload = function()
{
    var button1 = document.getElementById("button1");

    // addEventListenerが存在しなければ、メソッドを作成します
    if(!button1.addEventListener){
        button1.addEventListener = addListener;
    }
    
    // removeEventListenerが存在しなければ、メソッドを作成します
    if(!button1.removeEventListener){
        button1.removeEventListener = removeListener;
    }
    
    // IEでもaddEventListenerメソッドでイベントリスナーを追加することが出来ます。
    button1.addEventListener("click", eventListener1, false);
    button1.addEventListener("click", eventListener2, false);
    
    var button2 = document.getElementById("button2");
    button2.onclick = function()
    {
        // IEでもremoveEventListenerメソッドでイベントリスナーを削除することが出来ます。
        button1.removeEventListener("click", eventListener1, false);
        alert("eventListener1を削除しました");
    }
}

やまねこのWebメモ