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

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() 的方式在函数调用中传递对元素的引用。范围变得有点笨拙，我不确定它是否可以通过您的箭头功能实现。

ele1.addEventListener('click', handler.bind(this, ele2, x))