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

Question

[Анатолий]

<input type="button" id="a" value="off">

let btn = document.getElementById('a');
btn.addEventListener('click', () => {
  document.addEventListener('click', clicker(btn), true);
  btn.value = 'Listen';
});

function clicker(btn) {
  return function handler(e) {    
    console.log(btn);
    document.removeEventListener('click', clicker(btn));
    document.removeEventListener('click', handler);
    btn.value = 'off';
  }
}

Этот же код:
https://codepen.io/workcode/pen/QWNXOpK

Answer 1

[MagnusDidNotBetray]

document.removeEventListener('click', handler, true);

Comments

[Анатолий]

А из другой функции можно удалить прослушивание?

<input type="button" id="b" value="Отключить">
let btn2 = document.getElementById('b');
btn2.addEventListener('click', () => {
  document.removeEventListener('click', clicker(btn), true);  
});

Исправил:
https://codepen.io/workcode/pen/QWNXOpK

[MagnusDidNotBetray]

Анатолий, так нельзя, потому что функция clicker всегда возвращает новую функцию. Можно так:

let btn2 = document.getElementById('b');
let handler = clicker(btn);

btn.addEventListener('click', () => {
  document.addEventListener('click', handler, true);
});

btn2.addEventListener('click', () => {
  document.removeEventListener('click', handler, true);  
});

[Анатолий]

Спасибо, как раз тоже такой же ответ нашел в Интернете.

Answer 2

[0xD34F]

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

Во-вторых, обработчик остаётся висеть потому, что

Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.