Question

以下是否在销毁元素之前实际删除了该事件？我无法在DOM检查器中弄清楚附加了哪些函数以及在运行以下代码后是否将其删除：

el.addEventListener('click', function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}, false);

el.removeEventListener('click', attachFunction, false);

Answer 1

不，就目前而言，您的代码无效

注意：要删除事件处理程序，使用addEventListener（）方法指定的函数必须是外部函数。

^{W3Schools w3fools - （对不起，但有时w3fools确实提供了你想要的东西）}

所以，你需要这样做：

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

el.addEventListener('click', attachFunction, false);

el.removeEventListener('click', attachFunction, false);

将按预期工作。

如果要将某些参数传递给函数attachFunction，则需要使用其他函数：

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

function linkFunction(){
  attachFunction(a, b); // a and b can be replaced with anything you want
}

el.addEventListener('click', linkFunction, false);

el.removeEventListener('click', linkFunction, false);

Answer 2

如果您希望能够移除使用addEventListener添加的事件监听器，请在addEventListener()电话的外部定义：

function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}

然后：

el.addEventListener("click", attachFunction);

然后您的.removeEventListener()可以正常工作。

Answer 3

在运行时之前评估语法function foo(whatever)，因此我不认为您的代码是有效的语法或具有预期的行为。你应该更好地使用这样的匿名函数：

var attachFunction = function(a, b) {
    console.log(a);
    console.log(b);
}
el.addEventListener('click', attachFunction, false);
el.removeEventListener('click', attachFunction, false);

请注意，事件监听器（此处为attachFunction）只能有一个参数作为事件对象。

Answer 4

function关键字可以通过两种方式使用：function statement或expression。我们讨论了差异here，但我会尝试覆盖相关部分。

当用作语句（如下所示）时，函数名称在语句的周围范围内有效：

function hi(){ 
    console.log(typeof hi); // "function"
}
console.log(typeof hi); // "function"

但是当用作表达式时，函数名只在函数体中有效：

var greetings = function hi(){ console.log(typeof hi); // "function" } console.log(typeof hi); // "undefined" console.log(typeof greetings); // "undefined

因此，您的初始示例的范围问题是，因为您将其用作表达式，所以当您尝试取消绑定时，名称attachFunction将是未定义的。

（我认为您对参数如何传递给事件处理程序也有一些疑惑，但这是一个单独的问题。）

javascript删除事件监听器

4 个答案: