Удалить EventListener в JavaScript после того, как событие произошло?

Question

Есть 24 объекта div, ожидающих / слушающих щелчок мышью. После нажатия на один объект div, я хочу удалить EventListener из всех 24 объектов div.

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener()//Problem lies here
        }

        //Some other code to be run after mouseclick

        },false);

}

Проблема в том, что removeEventListener вложен в addEventListener, и мне нужно определить тип, прослушиватель, заголовок в качестве атрибутов для метода removeEventListener. И я думаю, что невозможно определить слушателя из-за вложенности.

Я также пытался определить имя функции, но это не сработало:

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function helpme(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener('click',helpme,false);
        }

        //Some other code to be run after mouseclick

        },false);

}

Answer 1

Должен работать с именованной функцией.Если ваш второй подход не работает должным образом, попробуйте сохранить первоначальный слушатель в переменную, например:

var handler = function(event) {
    for(...) {
        removeEventListener('click', handler, false);
    }
};

addEventListener('click', handler, false);

Ps.если вы заботитесь о скорости, вы можете рассмотреть возможность использования только одного обработчика событий.Вы можете поместить обработчик в родительский элемент div, а затем делегировать событие оттуда.С 24 обработчиками ваш нынешний подход, вероятно, не сильно ударит по производительности, но об этом следует помнить, если он когда-либо будет медленным.