使用纯 JavaScript 解除事件委托的多参数事件侦听器

如何解决使用纯 JavaScript 解除事件委托的多参数事件侦听器

我有一个问题，它被不同的答案所触及，但据我所知，与我所需要的细节不同。我希望解除绑定事件侦听器，但有一些限制。

1. 对子项的事件委托
2. 事件侦听器采用次要参数
3. 事件函数必须在 if 子句中解除绑定

我将其简化为下面的示例。当您单击第一个按钮时，您可以单击任何其他按钮。第一个按钮的文本将相应更改。但是，由于事件侦听器永远不会被删除，因此您可以不断更改“选择”并单击任何其他按钮。我想要的是，当您单击第一个按钮时，您只能单击另一个按钮，然后删除侦听器。实际上，这意味着如果你想改变你的“选择”，你首先需要再次点击第一个按钮，然后重新附加事件侦听器。

const btn = document.querySelector("button")
const div = document.querySelector("div")

function listen(text,evt) {
  if (evt.target.tagName == "BUTTON") {
    btn.textContent = text + evt.target.textContent
    // Unbind listen function from div so that that `btn` must be clicked every time
    // you want to change the selected button.
    // The following does NOT work.
    div.removeEventListener("click",this)
  }
}

btn.addEventListener("click",evt => {
  div.addEventListener("click",listen.bind(this,"I selected "))
})

<button>Click me</button>

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

如您所见，我尝试删除事件侦听器，但由于我使用了 bind（以使辅助参数起作用），因此我认为 this 不再是相同的引用。如何在不依赖其他库的情况下使其工作？

解决方法

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="A" id="formA"> mydrink: <input type="text" value="beer" name="mydrink" /><br /> <input type="radio" name="test" value="male" checked /> <label for="male">Male</label><br /> <input type="radio" name="test" value="Female" /> <label for="female">Female</label><br /> <input type="radio" name="test" value="other" /> <label for="other">Other</label> </form> <br /> <form name="B" id="formB" action="forms.html" method="post"> bar: <input type="text" name="bar" value="doogans" /><br /> <input type="hidden" name="Qnty" value="1" /> <input type="button" value="submit" /> </form> 无论如何都不会奏效。它通常指的是处理程序绑定到的 DOM 元素，而不是函数本身。

你可以用不同的方式来解决这个问题。一种可能性是引入一个用于绑定事件处理程序的帮助程序，它依次将“删除”函数传递给处理程序。

this

const btn = document.querySelector("button")
const div = document.querySelector("div")

function addEventListener(element,type,handler,...args) {
  const handlerWrapper = function(event) {
    return handler.call(this,event,remove);
  };
  const remove = () => element.removeEventListener(type,handlerWrapper);

  element.addEventListener(type,handlerWrapper,...args);
}


function listen(text,evt,remove) {
  if (evt.target.tagName == "BUTTON") {
    btn.textContent = text + evt.target.textContent
    // Unbind listen function from div so that that `btn` must be clicked every time
    // you want to change the selected button.
    remove();
  }
}

btn.addEventListener("click",evt => {
  addEventListener(div,"click",listen.bind(this,"I selected "))
})

---

话虽如此，如果你总是想最多执行一个事件处理程序一次，那么在绑定事件处理程序时传递once: true option。