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

我正在尝试删除与

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.
}

---

事先谢谢你。

你不能那样做。您没有对在版本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);
  }
}

---

你不能那样做。您没有对在版本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);
  }
}

---

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

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

---

这应该是可行的。

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

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

---

这应该行得通。

您试过阅读文档吗？是的，我有。我没有在单击元素时调用的同一个函数中提到删除它。它也没有提到内存泄漏。我知道有些情况下会发生内存泄漏。不幸的是，我不知道所有的角落案例。你试过阅读文档吗？是的，我有。我没有在单击元素时调用的同一个函数中提到删除它。它也没有提到内存泄漏。我知道有些情况下会发生内存泄漏。不幸的是，我不知道所有的情况。为什么我不把函数作为参数来传递。。。但是，在这些场景中，为什么将

此
作为参数传递是安全的？为什么它指向元素而不是全局窗口或其他东西？因为引用触发事件的元素是一种理想的行为，因此处理程序中的
this
值就是对元素的引用。更多信息。在处理程序中搜索“this
的值”。为什么我没有想到将函数作为参数传递。。。但是，在这些场景中，为什么将
此
作为参数传递是安全的？为什么它指向元素而不是全局窗口或其他东西？因为引用触发事件的元素是一种理想的行为，因此处理程序中的
this
值就是对元素的引用。更多信息。在处理程序中搜索“this
的值”。