时间戳

首页 > 解决方案 > JS removeEventListener 里面有函数

javascript - 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

标签： javascriptevent-handlingdom-events

解决方案

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

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>

推荐阅读