如何使用 class 触发多个元素的 onmouseover 和 onclick 函数？

Question

我有这个有效的代码。基本上就是在onclick和onmouseover播放声音。但我必须在许多元素（链接和图像）上使用它。我想要一个可以让我在 html 页面中使用 class 而不是 onmouseover 和 onclick 的解决方案。我认为它类似于事件侦听器，但我发现很难实现它。

下面是我的代码

var audio, clicksound, hoversound, mutebtn;
function initAudioPlayer(){
  audio = new Audio();
  audio.src = ("audio.ogg", "audio.mp3");
  audio.loop = false;
  audio.volume = 0.5;
  audio.play();

  clicksound = new Audio();
  clicksound.src = ("audio/click.ogg", "click.mp3");
  clicksound.loop = false;
  clicksound.volume = 0.5;
  clicksound.play();

  hoversound = new Audio();
  hoversound.src = ("audio/hover.ogg", "hover.mp3");
  hoversound.loop = false;
  hoversound.volume = 0.5;
  hoversound.play();

  mutebtn = document.getElementById("mutebtn");

  mutebtn.addEventListener("click", mute);

  mutebtn.addEventListener("click", muteclick);

  mutebtn.addEventListener("click", mutehover);

  function mute(){
    if(audio.muted){
        audio.muted = false;
        mutebtn.style.background = "url(images/speaker.png) no-repeat";
      } else {
        audio.muted = true;
        mutebtn.style.background = "url(images/muted.png) no-repeat";
      }
  }

  function muteclick(){
    if(clicksound.muted){
        clicksound.muted = false;
        mutebtn.style.background = "url(images/speaker.png) no-repeat";
      } else {
        clicksound.muted = true;
        mutebtn.style.background = "url(images/muted.png) no-repeat";
      }
  }

  function mutehover(){
    if(hoversound.muted){
        hoversound.muted = false;
        mutebtn.style.background = "url(images/speaker.png) no-repeat";
      } else {
        hoversound.muted = true;
        mutebtn.style.background = "url(images/muted.png) no-repeat";
      }
  }

}
window.addEventListener("load", initAudioPlayer);

<html>
<head>
<title>Just a sample code snippet</title>
</head>
<body>

<p><a href="#" onmouseover="hoversound.play()" onclick="clicksound.play()">Link 1 of 50+</a></p>

<p><a href="#" onmouseover="hoversound.play()" onclick="clicksound.play()">Link 2 of 50+</a></p>

<p><a href="#" onmouseover="hoversound.play()" onclick="clicksound.play()">Link 3 of 50+</a></p>

<p><a href="#" onmouseover="hoversound.play()" onclick="clicksound.play()">Link 4 of 50+</a></p>

<button onmouseover="audio.play()" onclick="clicksound.play()">Play Audio Sound</button>

</body>
</html>

Answer 1

你可以这样做：

document.addEventListener("mousemove", ( event ) => {
    const hoverElement = event.target;
    if( hoverElement.classList.contains('desiredClass') ){
        // Do somethig
    }
});

如何使用 class 触发多个元素的 onmouseover 和 onclick 函数？

How do I use class to trigger functions for multiple elements onmouseover and onclick?

html

javascript

onclick

onmouseover