JavaScript DOM和JQuery事件差异

我有两组代码，一组来自JavaScript和JQuery

JavaScript—在这里，我遍历html代码，添加一个事件侦听器，并将值传递给我的函数，以便使用开关进行比较。因此，当我点击一个按钮时，它会发出声音，工作正常，但在JQuery中，它的工作方式不同，我不明白为什么

for(var i=0;i < arrayLength; i++){
      document.querySelectorAll(".drum")[i].addEventListener("click", function(){

      var buttonInnerHTML = this.innerHTML;
      makeSound(buttonInnerHTML);
      buttonAnimation(buttonInnerHTML);
  });
}

function makeSound(key){  
  switch (key) {
    case "w":
      var tom1 = new Audio('sounds/tom-1.mp3');
      tom1.play();
      break;
    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;
    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;
    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;
    case "j":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;
    case "k":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;
    case "l":
      var kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;
    default:
      //console.log(buttonInnerHTML);
  }
}

---

我想理解为什么当我有forloop时JQuery循环4次，而domJavaScript没有。每次调用

$（“.btn”）.on（）

时，它将事件处理程序的另一个副本添加到所有按钮。因此，它将事件处理程序附加到所有按钮，但是JavaScript DOM事件处理程序如何将事件处理程序单独附加到每个按钮？在您的vanilla JS脚本中，您循环通过按钮，并为每个按钮添加一个侦听器，这样就可以了。使用jQuery，

$（“.btn”）

已经选择了所有按钮，您可以同时将侦听器添加到所有按钮中，因此您不需要loop.Perfect。谢谢有一个问题是，addEventListener with JavaScript不能直接添加到所有按钮，但必须逐个检查，对吗？e、 g.“document.queryselectoral（“.drum”）[i].addEventListener”可以使用循环工作，但document.queryselectoral（“.drum”）.addEventListener无法工作。

for(var i=0; i < numOfButtons; i++){
    $(".btn").on("click",function(){
    var buttonPress = $(".btn").index(this); //getting index value of array clicked
    //var buttonPress = $(this).text(); //getting text

    //console.log(buttonPress);
    buttonSelect(buttonPress);
  })
}

function buttonSelect(key){

  switch (key) {
    case 0:
    console.log("hi");
      $("#green").fadeOut();
      $("#green").fadeIn();
      break;
    case 1:
      $("#red").fadeOut();
      $("#red").fadeIn();
      break;
    case 2:
      $("#yellow").fadeOut();
      $("#yellow").fadeIn();
      break;
    case 3:
      $("#blue").fadeOut();
      $("#blue").fadeIn();
        break;

    default:

  }
}

 $(".btn").on("click",function(){
    var buttonPress = $(".btn").index(this); //getting index value of array clicked
    //var buttonPress = $(this).text(); //getting text

    //console.log(buttonPress);
    buttonSelect(buttonPress);
  });

function buttonSelect(key){

  switch (key) {
    case 0:
    console.log("hi");
      $("#green").fadeOut();
      $("#green").fadeIn();
      break;
    case 1:
      $("#red").fadeOut();
      $("#red").fadeIn();
      break;
    case 2:
      $("#yellow").fadeOut();
      $("#yellow").fadeIn();
      break;
    case 3:
      $("#blue").fadeOut();
      $("#blue").fadeIn();
        break;

    default:
  }
}