Почему не срабатывает removeEventListener?

Question

[Анатолий]

Почему не отменяется addEventListener?
Полный пример тут
Нужно открыть консоль, кликнуть на input и пару раз на пустое место.

document.querySelector('.set_month').addEventListener('click', openWin);

function openWin(e){
  ...
  document.getElementById('mcalend').addEventListener('click', clicker(parent));
  document.addEventListener('click', clickerOut(parent));
}

function clickerOut(parent){
  return function(e) {    
    ...
    console.log('...');
    document.removeEventListener('click', clickerOut);
  }
}

Answer 1

[0xD34F]

Во-первых - всё срабатывает. Попытайтесь осознать разницу между "не срабатывает" и "срабатывает не так, как ожидается".

Во-вторых - обработчик остаётся висеть потому, что вы передаёте в removeEventListener не то, что передавали в addEventListener. Смотрите сами:

document.addEventListener('click', clickerOut(parent));

document.removeEventListener('click', clickerOut);

clickerOut(parent) и clickerOut - это что по-вашему, одно и то же? Никак нет.

Исправляем:

function clickerOut(parent) {
  return function handler(e) {    
    ...
    document.removeEventListener('click', handler);
  }
}

Comments

[Анатолий]

Не совсем понял, при чем тут handler, если мы объявляли clickerOut? Ну хорошо, это работает, но если из этой же функции, нужно удалить другое событие? В примере написано:

el_table.removeEventListener('click', clicker);
document.removeEventListener('click', clickerOut);

Хорошо, с clickerOut Вы разобрались, а что делать с clicker она также имеет параметры?

[Анатолий]

Хотя в данном примере, возможно el_table.removeEventListener('click', clicker)совсем никакой роли не играет, я удаляю эту строку и ничего не меняется.
Т.е. при повторном клике по input, и далее клик по календарю обрабатывается всего 1 раз, а не не увеличивается от количества кликов по input.