如何添加和删除作为箭头函数的事件侦听器答案

【问题标题】：How to add and remove event listeners that are arrow functions如何添加和删除作为箭头函数的事件侦听器
【发布时间】：2020-10-31 21:07:06
【问题描述】：

我正在尝试使用箭头函数添加和删除事件侦听器。我可以添加但不能删除它们。我已阅读文档，似乎没有任何使用箭头函数的示例。箭头函数不能与 removeEventListener 一起使用是否有原因？如果事件侦听器尚不存在，有没有办法只添加它？最终这就是我想要做的。

let bluebox = document.querySelector('.bluebox');
let redbox = document.querySelector('.redbox');

const clickMe = ()=>{
    alert("click added");
};

bluebox.addEventListener('click', ()=>clickMe());
bluebox.removeEventListener('click',()=>clickMe());

.boxes{
  width:calc(25% - 4px);
  height:50vh;
  margin:2px;
}
.redbox {
  width: 100%;
  height: 100%;
  background-color: red;
}

.bluebox {
  width: 100%;
  height: 100%;
  background-color: blue;
}

<div class="boxes">
  <div class="bluebox"></div>
  <div class="redbox"></div>
</div>

【问题讨论】：

FWIW，您遇到的问题并非特定于箭头功能。如果您使用函数表达式，也会发生同样的情况。您必须将对同一函数对象的引用传递给removeEventListener。

标签： javascript html ecmascript-6

【解决方案1】：

您正在使用箭头函数 ()=>clickMe() 创建新的回调。 removeEventListener 无法确定要删除哪个 cb。您可以使用相同的参考来修复它

bluebox.addEventListener('click', clickMe);
bluebox.removeEventListener('click',clickMe);

【讨论】：