我们如何在javascript中添加两个事件监听器的单击和击键
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我们如何在javascript中添加两个事件监听器的单击和击键相关的知识，希望对你有一定的参考价值。
我正在尝试同时使用单击和击键，但是通过按键遇到问题。如果我们可以在一个语句中加入两个事件，是否有可能。
<audio id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"> </audio>
<div>
<button name="Q">Q</button>
</div>
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();
);
答案
由于将音频播放限制为特定的按键，因此无法在click和keydown事件之间共享整个事件处理程序。但是，可以定义一个可重用的函数（即playSoundQ()），该函数可用于两个事件，如下所示：
/* Define reusable play sound function for both events */
function playSoundQ()
document.getElementById("Q").play();
document.querySelector("[name=Q]").addEventListener("click", playSoundQ);
/* Change to document */
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>以上是关于我们如何在javascript中添加两个事件监听器的单击和击键的主要内容，如果未能解决你的问题，请参考以下文章
如何在 javascript 中为所有事件添加事件侦听器而不单独列出它们？