2017-05-28 169 views
3

的我怎麼能刪除此事件監聽器我都試過,但下面的代碼,並沒有縫裸露任何水果removeEventListener匿名函數的javaScript

class Tag { 
    constructor(name){ 
     this.tag = document.createElement(name); 
    } 
     removeEvent(e,func){ 
     this.tag.removeEventListener(e,func,false); 
    } 
     addEvent(e,func) { 
     this.tag.addEventListener(e,func,false); 
    } 

} 

let tag = new Tag(); 
tag.addEvent('click',(e)=> { 
    console.log('something'); 
}); 

如何獲得removeEvent工作?請幫助我特別需要如何引用匿名函數,因爲這個工作。

function handler(e){ 
    // code for event 
} 

tag.addEventListener('click',handler,false); 
tag.removeEventlistener('click',handler,false); 

我曾嘗試加入

removeEvent(e,func) { 
     func.ref = function(){ 
      return arguments.callee; 
     } 

     this.tag.removeEventListener(e,func.ref,false); 

    } 

只是沒有現在我們將參照func.ref作爲函數引用給定的工作;

+0

我不認爲你可以做,沒有爲了保存到事件處理程序的引用將它傳遞給'removeEventListener'。 – Thiatt

+0

如果你追蹤到這一切,jQuery的'off()'方法[附加到這個'jQuery.event.remove()'](https://github.com/jquery/jquery/blob/a6b0705294d336ae2f63f7276de0da1195495363/src/event。 js#L221),然後做其他事情。最終,它會以您嘗試的'removeEventListener()'調用結束。但是,句柄來自'privData',所以我的猜測是他們在某處保留了一個引用,以便稍後可以傳遞它。 –

回答

0

匿名函數不能被刪除,因爲它們沒有與您的代碼可訪問的標識符一起存儲。這就是爲什麼他們稱他們爲「匿名者」,這是使用它們的不利方面之一。另一個缺點是無法直接爲它們編寫單元測試。它們的優勢在於,因爲它們不被存儲,所以保存了一點內存。而且,作爲一種函數式編程語言,JavaScript允許匿名函數作爲數據很容易地傳遞(儘管您肯定可以傳遞指定的函數引用)。

+0

謝謝你們真的幫助我決定使用this.events ['event_name']跟蹤對象標記中的事件。click_0 = func;以這種方式,我可以刪除事件與對象的引用,即tag.removeEvent(tag.events.click.click_0)整數click_ [int]正在追加一個循環計數器,因爲我創建了一個相同類型的新事件 – Breimer

0

不幸的是,刪除作爲監聽器的匿名函數是不行的。

您可以使用一個小的解決方法來存儲每次傳入的函數並跟蹤所有事件,然後使用「緩存」事件偵聽器來檢索它們並分離事件。

下面一個例子的草案:

var events = []; 
 

 
function storeEvent(id, fn, useCaptureMode, event) { 
 
\t var e = findStoredEvent(id, event, useCaptureMode); 
 
    if (!e) { 
 
    \t events.push({id, fn, useCaptureMode, event}); 
 
    } 
 
} 
 

 
function findStoredEvent(id, event, useCaptureMode) { 
 
\t return events.find(el => el.id === id && el.event === event && el.useCaptureMode === el.useCaptureMode); 
 
} 
 

 
document.getElementById("test").addEventListener('click', function() { 
 
\t storeEvent(this.id, arguments.callee, false, 'click'); 
 
\t console.log('test'); 
 
}, false); 
 

 
function detachEvent() { 
 
\t var e = findStoredEvent('test', 'click', false); 
 
    if (e) { 
 
\t \t document.getElementById("test").removeEventListener(e.event, e.fn, e.useCaptureMode); 
 
    events.splice(events.findIndex(el => el === e), 1); 
 
    } 
 
}
<button id="test"> 
 
    Test 
 
</button> 
 
<button id="remove" onclick="detachEvent()"> 
 
    Remove Event 
 
</button>

我希望它能幫助

0

我在擴展我在寫有同樣的問題。我通過添加一個新的偵聽器來解決此問題,該偵聽器在事件到達要刪除的偵聽器/函數之前捕獲/停止事件的所有傳播。

window.addEventListener(type, function (event) { 
    event.stopPropagation(); 
}, true); 

信用:StackOverflow