使用 Javascript onclick 或 keydown 事件

Question

我正在使用 JavaScript 和 CSS 创建可以翻转和播放声音的按键。在正面有一个图像，然后当按下键时，它会播放声音并翻转以陶醉背面显示不同的图像并在释放键后翻转回来。该代码适用于该目的，但我希望在有人也单击该键时具有相同的功能。我可以两者兼得吗？

function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }

  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', playSound);

Answer 1

是的，就我而言，您可以根据需要为每个对象设置任意数量的事件侦听器。只需使用相关的事件侦听器并将它们附加到相关的 HTML 对象。请记住，在 Javascript 中，每个事件都需要一个事件侦听器。例如：（来自https://gomakethings.com/listening-to-multiple-events-in-vanilla-js/）

这行不通：

document.addEventListener('click mouseover', function (event) {
    // this doesn't work
}, false);

相反，您必须执行如下操作：

var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

Answer 2

是的，你可以两者兼得，你可以这样做：

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  e.target.classList.remove('playing');
}

function playSound(e) {
  let keyCode;
  if (e.type === 'click') {
    keyCode = e.currentTarget.dataset.key;
  } else {
    keyCode = e.keyCode;
  }

  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`div[data-key="${keyCode}"]`);
  if (!audio) return;

  key.classList.add('playing');
  audio.currentTime = 0;
  audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
keys.forEach(key => key.addEventListener('click', playSound))

我已经使用 event.type to determine if the event is a click or a keydown and used element.dataset 来检索适当的密钥以防发生 click 事件（这些事件没有 keyCode 属性）。

此外，在 click 事件的情况下，event.target 实际上是单击的键，您可以使用它而不是在 DOM 中查找键（querySelector(`div[data-key="${keyCode}"]`)打电话）。

使用 Javascript onclick 或 keydown 事件

Use Javascript onclick or keydown for event

javascript

onclick

keydown