Question

我正在尝试删除与onclick调用的函数相同的函数中的事件侦听器。

以下示例说明了我的问题。我试图使用这种结构的原因是将一个函数传递给一个视图对象，以便它可以将它作为onclick函数添加到创建的元素。

"use strict";

// Do I need var fun = function()... here or I could use only function fun() { ....}?
var fun = function(obj, num) {
  alert(obj.id + ' ' + num);
  obj.onclick = ""; // Version 1. This seems to work
  //obj.removeEventListener('click', ); // Version 2. What should I add after the comma to remove EventListener?

}

setFn(fun);

function setFn(fn) {

  var funct = fn;

  var val = 10;
  var elem = document.getElementById('test');
  // The next function works with and without return. What are the differences? Are there any possible memory leaks?
  elem.onclick = function() { funct(this, 11); }; // Version 1. Why in this case 'this' is not referring to the global 'window'?
  //elem.addEventListener('click', function() {funct(this, val); }); // Version 2.
}

提前谢谢。

Answer 1

你不能这样做。您没有引用在版本2中传递给.addEventListener()的匿名函数，因此无法删除它。

一种可能性是命名当前的匿名函数，并将其作为第三个参数传递给funct。

elem.addEventListener('click', function f() {funct(this, val, f); });

然后fun可以使用它来删除侦听器。

var fun = function(obj, num, bound_fn) {
  alert(obj.id + ' ' + num);
  if (bound_fn) {
    obj.removeEventListener('click', bound_fn);
  }
}

Answer 2

要删除事件侦听器，您需要传递与添加的完全相同的函数。

"use strict";

var fun = function(obj, num, originalEventHandler) {
  alert(obj.id + ' ' + num);
  obj.removeEventListener('click', originalEventHandler);
}

function setFn(fn) {
  var element = document.getElementById('test');

  element.addEventListener('click', function eventHandler() {
    fn(this, 11, eventHandler);
  });
}

setFn(fun);

这应该有用。

在作为onclick函数的函数中删除事件侦听器/ onclick

2 个答案: