时间戳

首页 > 解决方案 > 我们如何在 javascript 中添加两个事件监听器 click 和 keydown

javascript - 我们如何在 javascript 中添加两个事件监听器 click 和 keydown

问题描述

我正在尝试同时使用 click 和 keydown ，但按键出现问题。如果我们可以在一个声明中加入这两个事件，是否有可能。

HTML

 <audio id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"> </audio>
 <div>
      <button name="Q">Q</button>
</div>

JavaScript

    const queButton = document.querySelector("[name=Q]");
    queButton.addEventListener("click", function() {
            document.getElementById("Q").play();
    });    

    queButton.addEventListener("keydown", function(e) {
            if (e.key == 81) {
                document.getElementById("Q").play();
            }
    });

标签： javascript

解决方案

由于仅在按下特定键时才会播放音频，因此无法在click和keydown事件之间共享整个事件处理程序。

但是，可以定义playSoundQ()为两个事件调用的可重用函数（即 ），如下所示：

/* Define reusable play sound function for both events */
function playSoundQ() {
  document.getElementById("Q").play();
}

const qButton = document.querySelector("[name=Q]");
/* It's possible to pass the playSoundQ directly as the event handler
here, seeing there's no additional logic in the event handler */
qButton.addEventListener("click", playSoundQ);

/* Add keydown event listener to document rather than button */
document.addEventListener("keydown", function(e) {

  /* Change to keyCode */
  if (e.keyCode == 81) {
    playSoundQ();
  }
});
<audio id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
<div>
  <button name="Q">Q</button>
</div>

另请注意，此处已应用了一些修复程序；keydown侦听器被添加到而document不是button以确保基于键的播放响应浏览器中发生的所有键事件。e.key处理程序中的也keydown已更正，e.keyCode以确保在按下“Q”键时播放。

希望有帮助！

推荐阅读