javascript删除事件侦听器

javascript removing event listeners

本文关键字：侦听器 事件 删除 javascript      更新时间：2023-09-26

以下内容在销毁元素之前是否确实删除了事件？我无法在DOM检查器中弄清楚附加了什么函数，以及在运行以下代码后是否删除了它们：

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

不，按照目前的情况，您的代码将无法使用

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

W3Schoolsw3傻瓜-（抱歉，有时w3傻瓜确实提供了您想要的东西）

所以，你需要这样做：

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

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

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

然后：

el.addEventListener("click", attachFunction);

然后你的.removeEventListener()就可以工作了。

语法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）只能有一个作为事件对象的参数。

function关键字可以通过两种方式使用：作为函数语句或表达式。这里有一个关于差异的讨论，但我将尝试涵盖相关部分。

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

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将未定义。

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

相关文章：