使用一个事件listner javascript处理几个元素

我是JavaScript新手，我正在根据教程视频制作一个项目

我无法理解在一些元素中添加eventlisntner的部分。 下面的代码是当keydown发生时的代码。从css播放将添加到key变量

window.addEventListener('keydown', function(e){
const audio = document.querySelector(`audio[data key="${e.keyCode}"]`)
if(!audio){
  return;
}

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
audio.currentTime = 0;//rew ind to the start
audio.play();
key.classList.add('playing');


})

这是从它们中删除css样式的代码，当上述代码工作时，它将立即工作

function removeTransition(e){
    if (e.propertyName !== 'transform') return;//skip if its transform
    this.classList.remove('playing')

}


const keys = document.querySelectorAll('.key');  
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

但是当我从HTML中删除.playing时，为什么我必须将forEach添加到addEventListner？讲师说我需要指定哪个键，但我想知道为什么第一个代码在没有forEach的情况下工作，即使它有几个元素

这是。玩css

.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}

---

我希望你们能解决这个问题，非常感谢。

这很熟悉，是Wes的鼓包项目吗？xD

好的。首先，将playing类添加到任何键（如果按下该键），该类将在键（GUI上的按钮）上播放转换。对于forEach（）部分，它将等待转换（由播放类播放）结束，然后将从所有按钮中删除该类，以便在再次按下某个键时将其添加回。如果向元素添加类而不删除它，则该元素只会生效一次，如果再次按键，则该按钮不会发生任何变化。这是因为classList.add（）方法将向元素添加一个类，当且仅当该类不在元素中时

---

希望我不会让您更加困惑。

document.querySelector

返回单个元素（与选择器的第一个匹配项）

document.querySelectorAll

返回多个元素，您不能将事件侦听器添加到节点列表-您迭代节点列表并将事件侦听器添加到列表中的每个元素。哦，我明白了，我知道它们之间的区别，但我不确定addEventListener将如何处理它们，您解决了我的问题，谢谢！没错！但有些代码让我难以理解！谢谢你的回答！