循环内创建/移除EventListener后重复触发问题求助

我需要在循环内部创建EventListener，执行完相关代码后将其移除，但每次循环执行后事件监听会重复触发——首次点击按钮弹出5条警告信息，第二次点击弹出10条，第三次点击弹出15条，以此类推。尝试过先移除再添加监听的方式，也没能解决问题，相关代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
    </head>
    <body>
        <button id="btn" onclick="fun()">button</button>
    </body>
    <script>
        const btn=document.getElementById("btn");
        console.log(btn);
        function fun(){
            for (let i = 0; i < 5; i++) {
                btn.addEventListener("click", ()=>{alert(`warning NO.${i}`)});
                
                //code to be executed
                
                btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});
            }
        }
    </script>
</html>

我尝试调整后的代码：

const btn=document.getElementById("btn");

function fun(){
    for (let i = 0; i < 5; i++) {
        btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});

        btn.addEventListener("click", ()=>{alert(`warning NO.${i}`)});
        
        //code to be executed
        
        btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});
    }
}

问题原因 #

核心问题在于：每次调用addEventListener和removeEventListener时，你传入的都是全新的箭头函数。JavaScript中，即使两个箭头函数的代码完全一样，它们也是不同的引用对象，removeEventListener无法找到对应的监听函数，所以根本没起到移除的作用。循环执行5次，就会给按钮绑定5个独立的点击监听；第二次调用fun又绑定5个，累计10个，以此类推，点击按钮时自然会触发所有绑定的监听。

解决方法 #

要让removeEventListener生效，必须保证添加和移除时使用同一个函数引用。你可以把监听函数赋值给变量，再用这个变量进行添加和移除操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <button id="btn" onclick="fun()">button</button>
</body>
<script>
    const btn = document.getElementById("btn");
    function fun(){
        for (let i = 0; i < 5; i++) {
            // 将监听函数保存为变量，确保引用一致
            const handleClick = () => alert(`warning NO.${i}`);
            
            btn.addEventListener("click", handleClick);
            
            // 执行你的业务代码
            
            btn.removeEventListener("click", handleClick);
        }
    }
</script>
</html>

额外说明 #

如果你的真实需求是点击按钮时直接弹出5条警告，那完全不需要绑定/移除事件监听，直接在fun里循环执行alert即可：

const btn = document.getElementById("btn");
function fun(){
    for (let i = 0; i < 5; i++) {
        alert(`warning NO.${i}`);
    }
}

内容的提问来源于stack exchange，提问作者Ibrahim Hamed