.removeEventListener() 移除的注意点

.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');
});复制代码

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