解决 `window.addEventListener` 使用匿名函数的移除问题

当你使用 window.addEventListener 并传入匿名函数时，实际上会遇到一个问题：由于每次你添加的匿名函数都是新的实例（即使它们的内容完全相同），因此很难直接通过 removeEventListener 来移除特定的监听器。这是因为 removeEventListener 需要传入与添加监听器时完全相同的函数引用才能正确地移除监听。

解决方案

1. 使用命名函数

最简单的方法是定义一个命名函数，然后在添加和移除监听器时都使用这个命名函数。这样，你可以确保传递给 addEventListener 和 removeEventListener 的是同一个函数引用。

function handleResize() {
    console.log('窗口大小改变了');
}

// 添加事件监听器
window.addEventListener('resize', handleResize);

// 移除事件监听器
window.removeEventListener('resize', handleResize);

2. 在必要时才添加监听器，并在合适的时机移除

如果你确实需要使用匿名函数作为事件处理程序，并且知道在什么时候不再需要监听该事件，可以考虑将事件监听逻辑封装在一个可管理的结构中，比如类或立即执行函数表达式(IIFE)，以便能够访问并移除监听器。

let resizeHandler = null;

function startListening() {
    if (!resizeHandler) {
        resizeHandler = function() {
            console.log('窗口大小改变了');
            // 假设在某些条件下停止监听
            stopListening();
        };
        window.addEventListener('resize', resizeHandler);
    }
}

function stopListening() {
    if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler);
        resizeHandler = null;
    }
}

startListening(); // 开始监听
// 某些逻辑后调用 stopListening() 来停止监听

3. 自动清理

在某些情况下，例如组件卸载时自动清除所有监听器，可以利用生命周期钩子（如果是在框架如React、Vue中）或者在适当的时机手动调用 removeEventListener。

是否需要取消监听？

• 短期事件：对于一次性事件或者在页面生命周期内短暂存在的事件监听器，通常不需要显式地移除监听器，因为当页面卸载时，这些监听器也会被销毁。

• 长期事件/频繁触发的事件：如果你的应用会长时间运行并且事件可能会频繁触发（如resize, scroll等），最好在不再需要监听时主动移除监听器，以避免潜在的性能问题或内存泄漏。

综上所述，虽然不是总是必须移除事件监听器，但在适当的情况下这样做是一个好的实践，特别是为了防止不必要的资源占用和可能的bug。使用命名函数是最直接有效的解决方案。