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 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称为函数引用，但现在还没有工作;

Answer 1

无法删除匿名函数，因为它们不会存储您的代码可访问的标识符。这就是为什么他们称呼他们为匿名＆＃34;这是使用它们的不利方面之一。另一个缺点是无法直接为它们编写单元测试。它们的优点是因为它们没有存储，所以节省了一点内存。此外，JavaScript作为一种函数式编程语言，允许匿名函数作为数据很容易地传递（尽管你当然可以传递命名函数引用）。

Answer 2

不幸的是，没有办法删除附加为侦听器的匿名函数。

每次传入的函数和跟踪所有事件时，您都可以使用一些解决方法，然后使用＆＃34;缓存＆＃34;事件侦听器，用于检索它们并分离事件。

这是一个例子的草稿：

＆＃13;

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);
  } 
}

＆＃13;

<button id="test">
  Test
</button>
<button id="remove" onclick="detachEvent()">
  Remove Event
</button>

＆＃13;

我希望它有所帮助

Answer 3

我在写作的扩展中遇到了同样的问题。我通过添加一个新的侦听器解决了这个问题，该侦听器在事件到达我想删除的侦听器/函数之前捕获/停止了事件的所有传播。

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

信用：StackOverflow

removeEventListener的匿名函数javaScript

3 个答案: