无法从函数中删除eventListener

Question

我调用一个函数，其中包含一个"if / else“语句，该语句根据作为参数传递的布尔值添加或移除侦听器。

我的问题是不能通过调用相同的函数来删除先前添加的侦听器。

我错过了什么？

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false);  
   // call the "listenerTest" function 5 seconds later with "false" argument does NOT remove the listener 

我做过多次测试，有趣的是，这是可行的

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);      // listener added
        window.removeEventListener("click", clickFn);   // and removed right after in the same block scope
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true); 

Answer 1

删除clickFn并将其置于listenerTest的范围之外。它每次调用该函数时都会创建一个新实例，因为clickFn被挂起到listenerTest函数的顶部。

function clickFn(event) {
  console.log(event)
}

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false); 

Answer 2

这是因为每次函数'listenerTest‘被调用时，都会为函数'clickFn’分配一个新的内存地址，所以当您尝试删除它时，它是一个与将它添加到事件侦听器时不同的函数。

Answer 3

您可以在检查侦听器是否存在之前使用条件(True)，getComponentListeners可能很有用