JavaScript：在 for 循環中創建時重復 EventListener

Question

我的代碼取決於在循環內創建一個 EventListener，然后在 function 完成后將其刪除，但在每次循環執行后 Eventlitesning 以某種方式重復，我的代碼如下所示：

<!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>

我第一次按下按鈕時出現 5 條警告消息，第二次按下按鈕時 5 條警告消息出現兩次，第三次出現 3 次，依此類推。

如果有人能在這個問題上支持我，我將不勝感激。

我嘗試執行以下操作，但也沒有用：

        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}`)});
            }
        }

Answer 1

這段代碼是否滿足您的要求？
注意： onclick() 本身是一個事件監聽器。

 <,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> function fun(){ for (let i = 0. i < 5; i++) { alert(`warning NO.${i}`); } } </script> </html>

JavaScript：在 for 循環中創建時重復 EventListener

問題描述

1 個解決方案

解決方案1
0 已采納 2023-01-26 10:43:35

JavaScript：在 for 循環中創建時重復 EventListener

問題描述

1 個解決方案

解決方案1 0 已采納 2023-01-26 10:43:35

解決方案1
0 已采納 2023-01-26 10:43:35