JavaScript Example - イベントリスナーの追加と削除 -

ページのロードイベントで以下の「呼び出し」ボタンのクリックイベントに、eventListener1、eventListener2という2つの関数を追加しています。
以下の「呼び出し」ボタンをクリックすると、そのイベントリスナーが呼び出されます。
「eventListener1を削除」をクリックすると、eventLisner1は削除され、再度「呼び出し」ボタンをクリックした際にはeventListener2だけが呼び出されます。

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

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


function addListener(eventTarget, eventType, eventListener)
{
    if(eventTarget.addEventListener){
        eventTarget.addEventListener(eventType, eventListener, false);
    }else if(eventTarget.attachEvent){
        eventTarget.attachEvent("on"+eventType, eventListener);
    }
}

function removeListener(eventTarget, eventType, eventListener)
{
    if(eventTarget.removeEventListener){
        eventTarget.removeEventListener(eventType, eventListener, false);
    }else if(eventTarget.detachEvent){
        eventTarget.detachEvent("on"+eventType, eventListener);
    }
}

window.onload = function()
{
    var button1 = document.getElementById("button1");
    addListener(button1, "click", eventListener1);
    addListener(button1, "click", eventListener2);
    
    var button2 = document.getElementById("button2");
    button2.onclick = function()
    {
        removeListener(button1, "click", eventListener1);
        alert("eventListener1を削除しました");
    }
}

やまねこのWebメモ