JS removeEventListener 里面有 function

Question

我创建了一个 function 搜索，按钮上有一个事件侦听器。 问题是 removeEventListener 不起作用，因为 init() 在其中执行。 因此，每次单击按钮时都会复制 EventListener。 如果我删除 init() 一切都很好。 也许我误解了它？

此外，如果我删除 function 搜索并且只使用 const 我知道它会触发。 但重点是我需要使用搜索。

function search(data) {
  const clickHandler = () => {
   console.log('search');

   init();
 };

 document.getElementById('search').removeEventListener('click', clickHandler);
 document.getElementById('search').addEventListener('click', clickHandler);
}

search(data);

function init() {
 console.log('hello');
}

console results:
first time; hello
second time; hello hello
third time; hello hello hello hello 

Answer 1

这里的问题是范围界定。 当您将 function 放入另一个内部时，它的范围为 function。 所以下次你调用 function 时，你会创建一个新的 function。 因此，您正在尝试删除以前不存在的 function。

 function clickHandler2() { console.log('world'); } function search() { const clickHandler = () => { console.log('hello'); }; document.getElementById('search').removeEventListener('click', clickHandler); document.getElementById('search').addEventListener('click', clickHandler); document.getElementById('search').removeEventListener('click', clickHandler2); document.getElementById('search').addEventListener('click', clickHandler2); } search(); search(); search();

 <button type="button" id="search">Search</button>