刪除事件偵聽器在一個對象字面值丟失此引用

目前正在使用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

刪除事件偵聽器在一個對象字面值丟失此引用

回答

相關問題