JS removeEventListener 里面有函数

如何解决JS removeEventListener 里面有函数

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

此外，如果我删除函数搜索并仅使用 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 

解决方法

这里的问题是范围界定。当您将函数放在另一个函数中时，它的作用域是该函数。因此，下次调用该函数时，您将创建一个新函数。所以你试图删除一个以前不存在的函数。

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>