Question

我想问你，如何使用arrwo函数删除事件监听器？我在这里尝试了一些方法但没有用有解决方案吗？

add.addEventListener("click" , ()=> {
  let b = document.createElement("input");
  b.setAttribute("id" , "dif");
  b.type = "number";
  b.placeholder = "Write Third Number";
  calc.append(b);
  
})

add.removeEventListener("click" );

Answer 1

要删除，您需要引用您为添加操作提供的回调，因此您需要在外部声明该函数并将其提供给add事件侦听器，然后将其删除：

let myClick = ()=> {
  let b = document.createElement("input");
  b.setAttribute("id" , "dif");
  b.type = "number";
  b.placeholder = "Write Third Number";
  calc.append(b); 
};

add.addEventListener("click" , myClick ):

add.removeEventListener("click", myClick );

Answer 2

如果要使用removeEventListener，则添加时需要使用命名函数。

function listener () {
  let b = document.createElement("input");
  b.setAttribute("id" , "dif");
  b.type = "number";
  b.placeholder = "Write Third Number";
  calc.append(b);
}
add.addEventListener("click", listener);
...
add.removeEventListener("click", listener);

Answer 3

之所以不起作用，是因为removeEventListener要求您将事件类型（例如click）和要删除的事件侦听器函数（箭头函数）作为参数传递。

必须同时提供两者的原因是因为您可以为同一事件的同一事件附加多个事件侦听器。

要使其正常运行，您有两种解决方案：

将箭头函数提取为命名函数。例如：

function doSomethingOnClick() {
// Do some stuff
}

element.addEventListener('click', doSomethingOnClick);

// later ...

element.removeEventListener('click', doSomethingOnClick);

将箭头功能分配给变量。例如：

const doSomethingOnClick = () => console.log('Doing some stuff ...');

element.addEventListener('click', doSomethingOnClick);

// later ...

element.removeEventListener('click', doSomethingOnClick);

有关更多信息，请查看Mozilla's documentation

删除事件监听器，箭头功能

3 个答案: