Javascript从外部函数中删除Binded EventListener

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

我试图从设置监听器的单独函数中删除带有绑定变量的事件监听器。

此问题/答案描述了如何从同一函数中删除绑定的侦听器

https://stackoverflow.com/questions/46455624/javascript-addeventlistener-removeeventlistener-and-bind

这就是我想要做的

function testBind(var1,var2){
//remove the bound event from within this function <<<
alert('bound event now removed');
}

function setEvent(){
var addEvent =  document.getElementById("testBtn");   
var boundYes = yesFunction.bind( this, this );
addEvent.addEventListener('mouseup', boundYes);
}

我能找到的所有示例都在set事件函数中删除了事件侦听器

addEvent.removeEventListener("mouseup", boundYes ); 

我知道使用bind每次都会创建一个新的事件监听器,并删除你需要设置的监听器,并通过相同的变量将其删除。

如何从testBind函数中正确删除事件侦听器?

谢谢

提问于
用户回答回答于

如果(由于代码中的约束)这个首选解决方案是不可能的,另一个选择是通过自定义属性将处理程序与元素相关联:

addEvent.boundYes = boundYes; /* Assign boundYes function to element */

这将为您提供在以下'mouseup'期间取消注册事件时通过DOM元素本身访问此函数处理程序实例的方法testBind()

function yesFunction() {
  console.log('yesFunction');
}

function testBind(var1, var2) {

  const addEvent = document.getElementById("testBtn");
  const boundYes = addEvent.boundYes;

  /* Check to see if boundYes associated with element */
  if (boundYes) {

    /* Remove the event listener from element */
    addEvent.removeEventListener('mouseup', boundYes);

    /* Disaccoaite the function from element */
    addEvent.boundYes = undefined;
    alert('bound event now removed');
  }
}

function setEvent() {
  var addEvent = document.getElementById("testBtn");
  
  /* Prevent multiple boundYes handlers */
  if (!addEvent.boundYes) {

    var boundYes = yesFunction.bind(this, this);
    addEvent.addEventListener('mouseup', boundYes);

    /* Attach boundYes function to element */
    addEvent.boundYes = boundYes;
  }
}


setEvent();

testBind();

<button id="testBtn">testBtn</button>
用户回答回答于

一个选项是setEvent返回绑定函数,以便testBind可以删除它:

function testBind(boundListener, element) {
  element.removeEventListener('mouseup', boundListener);
}

function setEvent() {
  var element = document.getElementById("testBtn");
  const yesFunction = () => console.log('listener running');
  var boundListener = yesFunction.bind(this, this);
  element.addEventListener('mouseup', boundListener);
  return { boundListener, element };
}

const { boundListener, element } = setEvent();
testBind(boundListener, element);

<button id="testBtn">click</button>

你需要一些方法来传递绑定函数。如果你创建它setEventsetEvent应该返回绑定函数,或调用testBind自身,或类似的东西。您还可以在外部创建绑定函数setEvent,将其传递给setEvent,并将其传递给testBind

扫码关注云+社区

领取腾讯云代金券