javascript 删除事件侦听器

Question

以下实际上是在销毁元素之前删除了事件吗？我无法在 DOM 检查器中弄清楚附加了哪些功能，以及它们是否在运行以下代码之后被删除：

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

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

Answer 1

如果您希望能够删除使用 addEventListener 添加的事件侦听器，请在 addEventListener() 调用外部定义它：

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

然后：

el.addEventListener("click", attachFunction);

那么你的.removeEventListener()就可以工作了。

Answer 2

语法 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 3

不，就目前而言，您的代码将不起作用

Note: To remove event handlers, the function specified with the addEventListener() method must be an external function.

^{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 4

function 关键字有两种使用方式：作为 function statement or an expression. There is a discussion of the differences 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 删除事件侦听器

javascript removing event listeners

javascript

event-listener