.removeEventListener() 移除的注意点

5,837 阅读1分钟
.removeEventListener() 方法要求我们向其传递与传递给 .addEventListener() 的函数 完全相同的监听器函数。

完全相同 意味着:

  • 具有相同的目标
  • 具有相同的类型
  • 并传递完全相同的监听器

例如:

 { name: 'Richard' } === { name: 'Richard' }

的答案会是false,因为他们属于不同的实体。


那么,什么样的可以成功移除呢?

function myEventListeningFunction() {
    console.log('howdy');
}

// 为 点击 事件添加一个监听器,来运行 `myEventListeningFunction` 函数
document.addEventListener('click', myEventListeningFunction);

// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', myEventListeningFunction);

这个可以√,因为他们都指向myEventListeningFunction()这同一个方法。


而如果是

// 为 点击 事件添加一个监听器,来运行 `myEventListeningFunction` 函数
document.addEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});

// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});

则不会成功移除×,因为他们的监听器函数并不是指向同一个。