删除处理程序不在范围内的事件侦听器

Question

我处于两个元素上都有EventListener的情况，并且它们具有相同的处理程序。 EventListeners被添加到函数内部，并且处理程序接受参数。

单击这些元素之一时，两个元素上的EventListeners都应删除。

示例代码：

const handler = (e, x, otherEle) => {
    e.target.removeEventListener('click', callHandler)
    otherEle.removeEventListener('click', callHandler)
    //callHandler is not defined
}

const myFunc = ()=>{
   let x = 7
   let ele1 = document.querySelector("#ele1")
   let ele2 = document.querySelector("#ele2")

   ele1.addEventListener('click', function callHandler(event){
     handler(event, x, ele2)
   })

   ele2.addEventListener('click', function callHandler(event){
    handler(event, x, ele1)
   })
}

我已经尝试将函数callHandler作为参数传递，但这没有用。

Answer 1

您可以使用许多策略来解决此问题。最简单的事实可能是在全局范围内已经可以使用ID标识元素，因此您可以将它们作为常规变量或从window对象进行引用：

const handler = () => {
    console.log("calling handler only once");
    ele1.removeEventListener('click', handler)
    ele2.removeEventListener('click', handler)
}

const myFunc = () => {
   // These references to element IDs are already available in the global scope
   // let ele1 = document.querySelector("#ele1")
   // let ele2 = document.querySelector("#ele2")

   ele1.addEventListener('click', handler);
   ele2.addEventListener('click', handler);
}

myFunc();

div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div id="ele1"></div>
<div id="ele2"></div>

另一种选择是简单地使用onclick，而不是添加和删除事件侦听器，它们的工作方式相同（它只能防止侦听元素上的多个单击事件：]]

const handler = (e, x, otherEle) => {
    console.log("calling handler only once");
    e.target.onclick = null;
    otherEle.onclick = null;
}

const myFunc = ()=>{
   let x = 7
   let ele1 = document.querySelector("#ele1")
   let ele2 = document.querySelector("#ele2")

   ele1.onclick = function (event) {
     handler(event, x, ele2)
   }

   ele2.onclick = function (event) {
     handler(event, x, ele1)
   }
}

myFunc();
div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}
<div id="ele1"></div>
<div id="ele2"></div>

[另一种选择，虽然可能是最棘手的实现，但它是通过使用.bind()之类的东西来传递对函数调用中元素的引用，作用域有点笨拙，我不确定用箭头功能是否可以实现。 >

.bind()