JS removeEventListener 里面有函数

Question

我在按钮上创建了一个带有事件侦听器的函数搜索。问题是 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

Answer 1

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

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>

JS removeEventListener 里面有函数

JS removeEventListener with function inside

javascript

event-handling

dom-events