removeEventListener 在 JavaScript 中不起作用 [已解决]

作者

removeEventListener 在 JavaScript 中不工作[已解决]

removeEventListener not working in JavaScript [Solved]

removeEventListener该方法可能不起作用的原因有多种：

  1. 没有将相同的功能传递给addEventListener和
    removeEventListener方法。
  2. 使用bind调用时返回新函数的方法
    removeEventListener。
  3. 调用removeEventListener与方法不同的 DOM 元素
    addEventListener。
  4. 两次注册事件侦听器 – 有和没有标志capture。

将 2 个不同的函数传递给 addEventListener 和 removeEventListener

这是问题的最常见原因 – 将 2 个不同的函数传递给
addEventListener()
和
removeEventListener()
方法。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function logger() {
  console.log('Button clicked');
});

// ⛔️ Doesn't work - we define another function
btn.removeEventListener('click', function logger() {
  console.log('Button clicked');
});

我们传递给这两个方法的函数看起来是一样的，然而，这是两个具有完全不同引用的不同函数，存储在内存中的不同位置。

对于 JavaScript 引擎，这两个函数没有任何关系。

相反，您应该定义函数并将相同的引用传递给
addEventListener和removeEventListener方法。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

btn.addEventListener('click', logger);

// ✅ Works
btn.removeEventListener('click', logger);

我们向这两种方法传递了相同的引用，因此该removeEventListener
方法按预期工作。

使用 bind() 返回一个新函数

removeEventListener该方法不起作用的另一个常见原因是使用bind返回新函数的方法。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

btn.addEventListener('click', logger);

// ⛔️ Doesn't work - bind returns a new function
btn.removeEventListener('click', logger.bind(null));

bind
()
方法使用提供的值和初始参数返回给定函数的副本this。

为避免此问题，将调用方法的返回值分配bind()给一个变量并将其传递给addEventListener和removeEventListener
方法。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

const boundLogger = logger.bind(null);

btn.addEventListener('click', boundLogger);

// ✅ Works
btn.removeEventListener('click', boundLogger);

调用removeEventListener另一个 DOM 元素

removeEventListener该方法不起作用的另一个常见原因是在另一个 DOM 元素上调用该方法。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

btn.addEventListener('click', logger);

// 👇️ Different DOM element
const blueBtn = document.getElementById('blue-btn');

// ⛔️ Doesn't work called on different DOM element
blueBtn.removeEventListener('click', logger);

要解决此问题，请确保在removeEventListener您调用该方法的同一元素上调用该addEventListener方法。

调用addEventListener方法两次

addEventListener
最后，如果您两次调用该方法，您也可能会遇到此行为- 一次没有捕获，一次有捕获。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

btn.addEventListener('click', logger, true);
btn.addEventListener('click', logger, false);

// ⛔️ Doesn't work registered with and without capture
btn.removeEventListener('click', logger);

您必须分别删除每个事件侦听器才能解决该问题。

索引.js
const btn = document.getElementById('btn');

function logger() {
  console.log('Button clicked');
}

btn.addEventListener('click', logger, true);
btn.addEventListener('click', logger, false);

// ✅ Works
btn.removeEventListener('click', logger, true);
btn.removeEventListener('click', logger, false);

我们不得不调用该removeEventListener方法两次以删除这两个事件——一个设置了捕获标志，另一个没有。

结论

要解决removeEventListener不工作的问题，请确保将相同的功能传递给addEventListener和removeEventListener方法。

传递具有不同引用的函数不会删除侦听器。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：