실패 예

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));
    });
});

삭제 단추를 누르면 경보 단추의 클릭 이벤트에 등록된 함수를 삭제하는 간단한 프로그램을 호출합니다.
삭제 버튼을 눌러도 경보 버튼의 클릭 이벤트는 삭제되지 않았다1.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였다.

성공 사례

삭제할 함수를 변수에 성공적으로 저장했습니다.
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']);
    });
});

삭제할 함수 미리 저장
경고 버튼을 눌러도 확인할 수 있지만 Google Chrome의 경우 개발자 도구Constore의true에 경고 버튼에 등록된 이벤트 청취자의 함수를 확인할 수 있습니다.  ↩