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

2 回答

• 0

  • 选择所有div具有 data-key 属性和 .key 使用.querySelectorAll()并循环它们 .

  • 在循环中使用.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();
    });
  })
  

  回复于 2024-04-29T11:24:42+08:00
• 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>
  

  回复于 2024-04-29T11:24:42+08:00