怎样用JavaScript移除事件监听器？

// 错误的做法：无法移除匿名函数
element.addEventListener('click', function() {
    console.log('Clicked!');
});

// 正确的做法：可以移除
function handleClick() {
    console.log('Clicked!');
}
element.addEventListener('click', handleClick);
// 稍后移除
element.removeEventListener('click', handleClick);

// React中移除事件监听器的例子
import React, { useEffect } from 'react';

function MyComponent() {
    useEffect(() => {
        function handleResize() {
            console.log('Window resized');
        }
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return <div>My Component</div>;
}

// 性能优化：移除循环中添加的监听器
const elements = document.querySelectorAll('.my-class');
const handleClick = function(event) {
    console.log('Element clicked:', event.target);
};

elements.forEach(element => {
    element.addEventListener('click', handleClick);
});

// 稍后移除
elements.forEach(element => {
    element.removeEventListener('click', handleClick);
});

// 最佳实践：检查监听器是否存在
if (element._myClickListener) {
    element.removeEventListener('click', element._myClickListener);
}