как добавить eventListener щелкнуть по нескольким элементам div с другим пользовательским атрибутом ключа данных - PullRequest
Новая
       4

как добавить eventListener щелкнуть по нескольким элементам div с другим пользовательским атрибутом ключа данных

0 голосов
/ 09 декабря 2018

Таким образом, у меня есть несколько div с различными data-key атрибутами как 

<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>

теперь в разделе <script>используя vanilla JS, я хочу воспроизвести звук с data-key, как при нажатии на div.Например, если я нажимаю на div с помощью data-key="65", он должен воспроизводить звук с data-key="65".

У меня есть keyDown eventListener, но я также хочу реализовать с щелчком по нему.

Я пытался 

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

, но не смог собрать ничего, что приведет к атрибутам div.

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Один из способов заключается в том, чтобы прикрепить прослушиватели событий к каждой клавише.Другой способ - подключить слушатель к родительскому узлу (предпочтительно не document) и использовать распространение событий, чтобы перехватывать события, когда они всплывают в DOM.Выбранный элемент будет находиться в свойстве target события.

Здесь я обернул ключи в группу ключей, которая содержит слушателя. 

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>
0 голосов
/ 09 декабря 2018

  1. Выберите все div с атрибутом data-key и .key с помощью .querySelectorAll() и проведите их по кругу.

  2. В цикле добавьте click обработчик событий, используя .addEventListener()

  3. В функции обработчика событий получите значениеdata-key с использованием свойства dataset.

  4. Выберите звуковой тег, имеющий конкретное значение data-key, с помощью селектора атрибута равно.

  5. Воспроизведение аудио .play()

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