Почему нельзя удалить прослушиватель событий у родных?

Question

function show1() {
  console.log("ok1");
  document.getElementById("a2").removeEventListener("click", delegate);
}

function show2() {
  console.log("ok2");
}

function show3() {
  console.log("ok3");
}

function delegate(event) {
  var flag = event.target;
  switch (flag.id) {
    case "a1":
      show1();
      break;
    case "a2":
      show2();
      break;
    case "a3":
      show3();
      break;
  }
}

ob = document.getElementById("tl");
ob.addEventListener("click", delegate);

<ul id="tl">
  <li id="a1">a1</li>
  <li id="a2">a2</li>
  <li id="a3">a3</li>
</ul>

Родительский узел ul содержит три дочерних узла li, связывает прослушиватель событий с родительским узлом, позволяет ul делегировать прослушивание событий всего узла.
Мое ожидание:
, когда вы нажимаете a1, функция show1 удалит прослушиватель событий у своего брата, чей идентификатор равен a2.
То есть вы нажимаете li, чей идентификаторa2 после нажатия li с идентификатором a1, ok2 не будет отображаться на консоли.

Реальное действие:
Вы нажимаете li с идентификатором a2 после нажатия li с идентификатором a1, ok2 будет отображаться на консоли.

Почему

document.getElementById("a2").removeEventListener("click",delegate);

не может удалить прослушиватель событий у братьев и сестер?
Как это исправить?

Answer 1

Это beacus, вы добавляете прослушиватель событий к ul, а не li.Добавьте обработчик event к li следующим образом

function show1(){
    console.log("ok1");
    document.getElementById("a2").removeEventListener("click",delegate);
}

function show2(){
    console.log("ok2");
}

function show3(){
    console.log("ok3");
}

function delegate(event)
{
    var flag = event.target;
    switch(flag.id){
        case "a1":
            show1();
            break;
        case "a2":
            show2();     
            break;
        case "a3":
            show3();
            break;
    }
}

ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}

<ul id="tl">
	<li id="a1">a1</li>
	<li id="a2">a2</li>
	<li id="a3">a3</li>
</ul> 

Answer 2

Если слушатель присоединен к элементу, единственное, что вы можете сделать, удалив его, это удалить того же слушателя из того же элемента - вы не можете удалить его из дочернего элемента, потому что он не присоединен к дочернему элементу..

Для нужной вам функциональности вы можете добавить узел, из которого вы хотите «удалить» функцию щелчка, в Set, а в обработчике родительского узла проверить, что event.target(переменная flag) не включена в это Set:

const elementsToIgnore = new Set();
function show1() {
  console.log("ok1");
  elementsToIgnore.add(document.getElementById("a2"));
}

function show2() {
  console.log("ok2");
}

function show3() {
  console.log("ok3");
}

function delegate(event) {
  var flag = event.target;
  if (elementsToIgnore.has(flag)) return;
  switch (flag.id) {
    case "a1":
      show1();
      break;
    case "a2":
      show2();
      break;
    case "a3":
      show3();
      break;
  }
}

ob = document.getElementById("tl");
ob.addEventListener("click", delegate);

<ul id="tl">
  <li id="a1">a1</li>
  <li id="a2">a2</li>
  <li id="a3">a3</li>
</ul>