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

Question

我正在尝试使用箭头函数添加和删除事件侦听器。我可以添加但不能删除它们。我已阅读文档，似乎没有任何使用箭头函数的示例。箭头函数不能与 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>

标签： javascripthtmlecmascript-6

Answer 1

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

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