Javascript:从设置函数外部删除绑定的事件处理程序
Javascript:从设置函数外部删除绑定的事件处理程序
提问于 2019-06-24 08:49:39
我正在尝试从设置侦听器的不同函数中删除具有绑定变量的事件侦听器。
我已经从相同的函数中发送了this post that describes how to remove a bound listener，这与我试图做的事情不同：
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);
}我找到的所有示例都在设置事件侦听器的同一函数中删除了事件侦听器：
addEvent.removeEventListener("mouseup", boundYes ); 我知道使用bind每次都会创建一个新的事件侦听器，要删除该侦听器，您需要通过相同的变量来设置和删除它。
如何正确地从testBind函数中删除事件侦听器？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-24 09:10:09
如果(由于代码中的约束)为this preferred solution is not possible，另一种选择是通过自定义属性将处理程序与元素相关联：
addEvent.boundYes = boundYes; /* Assign boundYes function to element */这为您提供了在testBind()期间注销'mouseup'事件时通过DOM元素本身访问此函数处理程序实例的方法
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>
Stack Overflow用户
发布于 2019-06-24 08:53:41
一种选择是让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>
你需要一些方法来传递绑定的函数。如果你在setEvent中创建它，setEvent应该返回绑定的函数，或者调用testBind本身，或者类似的东西。您还可以在setEvent外部创建绑定函数，将其传递给setEvent，也可以将其传递给testBind。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56728723
复制相关文章
相似问题
腾讯云开发者
