Question

所以我有多个具有不同data-key属性的div

<div data-key="65" class="key">
  <kbd>A</kbd>
  <span class="sound">clap</span>
</div>

并且我有多个音频，其中data-key为属性

<audio data-key="65" src="sounds/clap.wav"></audio>

现在在使用香草JS的<script>部分中，我想使用与单击div相同的data-key播放声音。例如，如果我使用data-key="65"单击div，则应该使用data-key="65"播放音频。

我有一个keyDown eventListener，但我也想通过单击它来实现。

我尝试了

document.addEventListener('click', function(e){
  console.log(e);
});

但无法获取导致div属性的任何内容。

Answer 1

选择所有具有data-key属性的div和使用.querySelectorAll()的.key并遍历它们。
使用.addEventListener()

click

在事件处理函数中，使用dataset属性获取data-key的值。
使用属性相等选择器选择具有特定data-key值的音频标签。
通过.play()

document.querySelectorAll(".key").forEach(function(ele){
  ele.addEventListener('click', function(e){
    var dataKey = this.dataset.key;
    document.querySelector("audio[data-key='"+dataKey +"']").play();
  });
})

Answer 2

一种方法是将事件侦听器附加到每个键。另一种方法是将侦听器附加到父节点（最好不是document），并使用事件传播来捕获事件，使它们冒起DOM。被点击的元素将位于事件目标属性中。

在这里，我将密钥包装在包含侦听器的密钥组中。

const group = document.querySelector('.key-group');
document.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Deconstruct the target property and grab
  // the element's dataset, parentNode, and tagName
  const { dataset, parentNode, tagName } = e.target;

  // Depending on where you click you'll either need to test for
  // kbd or span elements...
  if (tagName === 'KBD' || tagName === 'SPAN') {

    // ...and log the key value of the parent dataset
    console.log(tagName, parentNode.dataset.key);
  }

  // Otherwise, if it's the div element
  if (tagName === 'DIV') {

    // ...log the key value from its dataset
    console.log(tagName, dataset.key);
  }

}

<div class="key-group">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>
  <div data-key="43" class="key">
    <kbd>F</kbd>
    <span class="sound">boom</span>
  </div>
</div>

如何添加eventListener单击具有不同的自定义数据键属性的多个div

2 个答案: