removeEventListenerの削除関数を保存しておこう 関数オブジェクトの落とし穴

失敗例

html

<button id="alert_button">アラートボタン</button>
<button id="remove_button">削除ボタン</button>

javascript

function alert_fun(e) {
    alert('test');
}

document.addEventListener('DOMContentLoaded', function () {
    alert_button.addEventListener('click', e => alert_fun(e));
    remove_button.addEventListener('click', function () {
        alert_button.removeEventListener('click', e => alert_fun(e));
    });
});

削除ボタンを押したら、removeEventListenerを呼んでアラートボタンのクリックイベントに登録した関数を削除する簡単なプログラム。

削除ボタンを押しても、アラートボタンのクリックイベントが削除されなかった¹。

alert_funの時は動作したのに、アロー関数のe => alert_fun(e)にしたら動作しない

原因

原因はe => alert_fun(e)が関数オブジェクトになっていて、呼び出し毎に異なる関数オブジェクトを返すから。

a=function(){}; b=function(){}; a===bの結果はfalse。
a=alert_fun; b=alert_fun; a===bの結果はtrue。

成功例

removeEventListenerで削除する関数を変数に保存しておくと成功した。

javascript

const event_listeners = {};
event_listeners['alert_fun'] = e => alert_fun(e);

function alert_fun(e) {
    alert('test');
}

document.addEventListener('DOMContentLoaded', function () {
    alert_button.addEventListener('click', event_listeners['alert_fun']);
    remove_button.addEventListener('click', function () {
        alert_button.removeEventListener('click', event_listeners['alert_fun']);
    });
});

removeEventListenerで削除する関数は保存しておこう

1. アラートボタンを押しても確認できるが、Google ChromeならデベロッパーツールのConsoleのgetEventListeners(alert_button)でアラートボタンに登録したイベントリスナーの関数を確認できる。 ↩