交换脚本时如何从按钮中删除所有事件侦听器？

如何解决交换脚本时如何从按钮中删除所有事件侦听器？

我在加载页面时删除事件侦听器时遇到问题，以便在替换 HTML 中的 js 文件时它们不会重复，因为它们无限地累加，每个按钮只需要一个处理程序。基本上它是关于在替换脚本时删除事件列表或在 PianoSounds 或 UkuleleSounds 板上使用 cloneNod 我尝试使用这个 cloneNode，但在目前的知识阶段对我来说太难了。

var PianoList = ["Sounds/Piano/A4.mp3","Sounds/Piano/B4.mp3","Sounds/Piano/C4.mp3","Sounds/Piano/D4.mp3","Sounds/Piano/E4.mp3","Sounds/Piano/F4.mp3","Sounds/Piano/G4.mp3"]
var PianoSounds = document.querySelectorAll("button")

for(let i=0; i<PianoSounds.length; i++)
{
PianoSounds[i].removeEventListener("load",Granie,false);
}

var Granie = function()
{
for(let i=0; i<PianoSounds.length; i++)
{
  var Graj = function()
  {
    let Piano = new Audio(PianoList[i])
    Piano.play();
  }
  PianoSounds[i].addEventListener("click",Graj,false);
}
}
window.onload(Granie());

var UkuleleList = ["Sounds/Ukulele/A.wav","Sounds/Ukulele/B.wav","Sounds/Ukulele/C.wav","Sounds/Ukulele/D.wav","Sounds/Ukulele/E.wav","Sounds/Ukulele/F.wav","Sounds/Ukulele/G.wav"]
var UkuleleSounds = document.querySelectorAll(".Button")


for(let i=0; i<UkuleleSounds.length; i++)
{
UkuleleSounds[i].removeEventListener("load",false);
}

var Granie = function()
{
for(let i=0; i<UkuleleSounds.length; i++)
{
  var Graj = function()
  {
    let Ukulele = new Audio(UkuleleList[i])
    Ukulele.play();
  }
  UkuleleSounds[i].addEventListener("click",false);
}
}

var Instrument = document.querySelectorAll("input[type=radio]");
var PianoButton = document.getElementById('Piano');
var UkuleleButton = document.getElementById('Ukulele');
for(let i=0; i<Instrument.length; i++)
{
    Instrument[i].addEventListener("click",function()
    {
        if(Instrument[i].value == "Piano"){
            var pianinoLen = document.querySelectorAll("script[src='Js/script.js']");
        var ukuleleLen = document.querySelectorAll("script[src='Js/Ukulele.js']");
      
      console.log(pianinoLen.length);
      console.log(ukuleleLen.length);
        
            if(pianinoLen.length == 0 ){
                if(ukuleleLen.length >= 1 && ukuleleLen.length != null){ukuleleLen[0].parentNode.removeChild(ukuleleLen[0]);}
                var piano = document.createElement('script');
                piano.src = "Js/script.js";
                var s = document.getElementsByTagName('script')[0]; 
                s.parentNode.insertBefore(piano,s);
                window.Pi();
             }
             else{console.log("ERROR");}
        }else if(Instrument[i].value == "Ukulele"){

            var pianinoLen = document.querySelectorAll("script[src='Js/script.js']");
         var ukuleleLen = document.querySelectorAll("script[src='Js/Ukulele.js']");

         console.log(pianinoLen.length);
         console.log(ukuleleLen.length);

         if(ukuleleLen.length == 0 )
            {
             if(pianinoLen.length >= 1 && ukuleleLen.length != null){pianinoLen[0].parentNode.removeChild(pianinoLen[0]);}
             var ukulele = document.createElement('script')
             ukulele.src = "Js/Ukulele.js";
             var c = document.getElementsByTagName('script')[0]; 
             c.parentNode.insertBefore(ukulele,c);
             window.uk();
            }
             else{console.log("ERROR");}

        }
  },false);
  }

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Witam! Klawiatura Dźwiękowa</title>
    <script src="Js/main.js" defer></script>
    <link rel="stylesheet" href="Css/keyboard.css">
    <link rel="stylesheet" href="Css/Main.css">
    <link rel="icon" type="image/png" href="Img/piano.png">
    
</head>
<body>
    <header>
        <section class="nav">
            <div>
                <p><a href="index.html" title="Klawiatura"></a></p>
            </div>
            <div class="rad">
                    <label class="container">
                       <b><i>Pianino</i></b> 
                            <input type="radio" name="script" value="Piano" id="Piano" checked>
                            <span class="checkmark"></span>
                    </label>
                
                    <label class="container">
                        <b><i>Ukulele</i></b>
                            <input type="radio" name="script" value="Ukulele" id="Ukulele">   
                            <span class="checkmark"></span>
                    </label>
            </div>
        </section>
    </header>
    <section class="but">
        <button class="Button">C4</button>
        <button class="Button">D4</button>
        <button class="Button">E4</button>
        <button class="Button">F4</button>
        <button class="Button">A4</button>
        <button class="Button">B4</button>
        <button class="Button">G4</button>
    </section>
    
    <footer>

        <section class="description">
            <div>
                <h1><em>Jak Grać:</em></h1>
                Klikaj w podane na przyciskach klawisze aby wybrzmiał dany dźwięk.
            </div>
        </section>
        <section class="description1">
            <div>
                <h1><em>Autorzy:</em></h1>
            <ul>
                <li>Kacper Tomaszewski</li>
                <li>Filip Sęk</li>
            </ul>
            </div>
        </section>
    </footer>
</body>
</html>

交换脚本时如何从按钮中删除所有事件侦听器？

如何解决交换脚本时如何从按钮中删除所有事件侦听器？

相关推荐