removeEventListener of Anonymous function javaScript

Question

我怎樣才能刪除這個事件偵聽器我已經嘗試過但低於代碼並且它不會接縫露出任何果實

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 因為這有效。

 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 稱為 function 參考；

Answer 1

刪除匿名事件監聽器的簡單方法

我發現刪除使用匿名函數的 eventListener 的一個簡單好方法是將這兩個函數添加到您的代碼中：

let events = new Map();
function addListener(element, event, callback, id) {
    events.set(id, callback);
    element.addEventListener(event, callback);
}

function removeListener(element, event, id) {
    element.removeEventListener(event, events.get(id));
    events.delete(id);
}

匿名 function 非常適合保留this上下文，但沒有找到同時擁有this和刪除 eventListener 的能力的好方法。

例子

 let events = new Map(); function addListener(element, event, id, callback) { events.set(id, callback); element.addEventListener(event, callback); } function removeListener(element, event, id) { element.removeEventListener(event, events.get(id)); events.delete(id); } let btn = document.getElementById('btn'); let cpt = 1; addListener(btn, 'click', 'btnClick', e => { btn.innerHTML = `x${++cpt}`; if (cpt === 3) { removeListener(btn, 'click', 'btnClick'); } });

 <button id="btn">x1</button>

Answer 2

無法刪除匿名函數，因為它們不與您的代碼可訪問的標識符一起存儲。 這就是為什么他們稱他們為“匿名”，這是使用它們的不利方面之一。 另一個缺點是無法直接為它們編寫單元測試。 它們的優點是因為它們沒有存儲，所以節省了一點內存。 此外，JavaScript作為一種函數式編程語言，允許匿名函數作為數據很容易地傳遞（盡管你當然可以傳遞命名函數引用）。

Answer 3

不幸的是，沒有辦法刪除附加為偵聽器的匿名函數。

每次傳入的函數和跟蹤所有事件時，您都可以使用一些解決方法，然后使用“緩存”事件偵聽器來檢索它們並分離事件。

這是一個例子的草稿：

 var events = []; function storeEvent(id, fn, useCaptureMode, event) { var e = findStoredEvent(id, event, useCaptureMode); if (!e) { events.push({id, fn, useCaptureMode, event}); } } function findStoredEvent(id, event, useCaptureMode) { return events.find(el => el.id === id && el.event === event && el.useCaptureMode === el.useCaptureMode); } document.getElementById("test").addEventListener('click', function() { storeEvent(this.id, arguments.callee, false, 'click'); console.log('test'); }, false); function detachEvent() { var e = findStoredEvent('test', 'click', false); if (e) { 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> 

我希望它有所幫助

Answer 4

我在寫作的擴展中遇到了同樣的問題。 我通過添加一個新的偵聽器解決了這個問題，該偵聽器在它到達我想刪除的偵聽器/函數之前捕獲/停止了事件的所有傳播。

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

信用： StackOverflow