使用一个事件列表器javascript处理一些元素

Question

我是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;
}

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

Answer 1

这很熟悉，是Wes的Drum Kit项目吗？ xD

好的。首先，如果您按下任何键，则将播放类添加到该类中，该类会在一个键（GUI上的按钮）上播放过渡。对于forEach（）部分，它等待过渡（通过播放类播放）结束，之后它将从所有按钮中删除该类，以便您可以在再次按下某个键时将其重新添加。如果在不删除元素的情况下向其添加类，则该元素仅会生效一次，如果再次按下某个键，则按钮将不会发生任何变化。这是因为classList.add（）方法将在且仅当该类不在元素内时才向该元素添加一个类。

希望我不会再让您感到困惑。