首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript:从设置函数外部删除绑定的事件处理程序

Javascript:从设置函数外部删除绑定的事件处理程序
EN

Stack Overflow用户
提问于 2019-06-24 08:49:39
回答 2查看 92关注 0票数 1

我正在尝试从设置侦听器的不同函数中删除具有绑定变量的事件侦听器。

我已经从相同的函数中发送了this post that describes how to remove a bound listener,这与我试图做的事情不同:

代码语言:javascript
复制
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);
}

我找到的所有示例都在设置事件侦听器的同一函数中删除了事件侦听器:

代码语言:javascript
复制
addEvent.removeEventListener("mouseup", boundYes ); 

我知道使用bind每次都会创建一个新的事件侦听器,要删除该侦听器,您需要通过相同的变量来设置和删除它。

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-24 09:10:09

如果(由于代码中的约束)为this preferred solution is not possible,另一种选择是通过自定义属性将处理程序与元素相关联:

代码语言:javascript
复制
addEvent.boundYes = boundYes; /* Assign boundYes function to element */

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

代码语言:javascript
复制
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();
代码语言:javascript
复制
<button id="testBtn">testBtn</button>

票数 2
EN

Stack Overflow用户

发布于 2019-06-24 08:53:41

一种选择是让setEvent返回绑定的函数,这样testBind就可以删除它:

代码语言:javascript
复制
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);
代码语言:javascript
复制
<button id="testBtn">click</button>

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56728723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档