删除事件侦听器在一个对象字面值丢失此引用

目前正在使用OLOO风格的方法在一个小项目上工作。 Problem found here 删除事件侦听器在一个对象字面值丢失此引用

所以我面临的问题是我有一个事件处理程序。

eventHandler: function() { console.log('Hit'); testSelector.removeEventListener('click', this.eventHandler, false); }

现在发生的事情是，我想这是第一次点击之后被去除。但是，这似乎并没有像我期望的那样工作。我将这个引用的对象绑定在一起，但似乎有什么东西我在这里实际发生的事情中缺少。任何人都可以澄清实际发生的事情或我出错的地方吗？

来源

2017-08-15 factordog

我不是在0100的专家，但我可以看到在你的榜样两个问题：

的一个事件监听回调处理程序内this指节点，所以你需要照顾你引用这两种方法同样this（ add/removeEventListener）
removeEventListener如果listener参数是不一样的addEventListener，并且当您使用bind你实际上是创建一个新的功能（所以你必须持续跟踪到）

在代码：

var testSelector = document.querySelector('.test'); 

var object = { 
    init: function() { 
    this.ref = this.eventHandler.bind(this) 
    testSelector.addEventListener('click', this.ref, false); 
    }, 
    eventHandler: function() { 
    console.log('Hit'); 
    testSelector.removeEventListener('click', this.ref, false); 
    } 
} 

object.init();

https://jsbin.com/hejenuraba/1/edit?js,console,output

来源

2017-08-15 20:15:19 maioman

太棒了。正是我在寻找的答案。稍微编辑您的答案以将this.ref绑定到实际属性。同时也删除了self = this，因为绑定会为你处理。 https://jsbin.com/kufepeyitu/2/edit?js,console,output – factordog

如果你必须去testSelector.addEventListener（'click'，this），你是否看到任何必须将其分配给另一个属性的原因.eventHandler.bind（this），false）; ？作为调试，它没有记录它引用节点，但外部对象，这是让我困惑。 – factordog

使用绑定你有它指向'对象'，但除非你得到绑定函数的引用你失去它，然后你不能在'removeEventListener'中引用它;希望它是有道理的。 – maioman

我得到了它在我的环境中工作如下：

var testSelector; 
var eventHandler = function(){ 
    console.log('Hit'); 
    testSelector.removeEventListener('click', eventHandler, false); 
    } 

$(document).ready(function(){ 
    testSelector = this.getElementById('btn'); 
    testSelector.addEventListener('click',eventHandler); 
});

你的代码看起来很好，但你可能要交叉检查以下内容：

在你的代码行：

testSelector.removeEventListener('click', this.eventHandler, false);

确保你有对testSelector和eventHandler的引用

来源

2017-08-15 19:22:58 Amjad

调试这个它具有正确的参考“这个”，这是令人困惑的部分，因为我们正确地结合此引用。上面的解决方案，我们只是避免javascripts'这'完全我不能做不幸，因为即时通讯试图找到解决方案，为什么我的删除无法正常工作。 – factordog

删除事件侦听器在一个对象字面值丢失此引用

回答

相关问题