Как на чистом JavaScript получить значение атрибута элемента по классу?

Question

[newked]

Всем привет!

Есть разметочка

<div>
<div class="elem" data-name="name-1">1</div>
<div class="elem" data-name="name-2">2</div>
<div class="elem" data-name="name-3">3</div>
</div>

Как кликнув по диву с классом elem вывести в консольку значение его атрибута data-name?

Интернет выдает мне всякие getElementsByClassName, которые явно не подходят для решения данной задачи, т.к. возвращают коллекцию элементов, а не конкретно тот по которому совершилось событие "клик"

Comments

[Чипекве]

https://developer.mozilla.org/ru/docs/Web/API/Even...

Answer 1

[Сергей Соколов]

document.addEventListener('click', event => {
  const { target } = event;
  if (target.tagName !== 'DIV'
      || !target.classList.contains('elem')) {
    return;
  }
  console.log(target.dataset.name);
});

Песочница

Comments

[imko]

Часто вижу слушатели клика на документ с проверкой таргета вместо того чтобы сразу на элемент вешать. В чем прикол? Чтобы не нагружать устройство выполнением querySelector?

[Сергей Соколов]

imko, называется «делегирование событий»
Есть плюсы, есть минусы. Читайте.

[imko]

Сергей Соколов, вижу минус - на каждый клик в любой точке страницы вызывается миллиард проверок)

[Сергей Соколов]

imko, один клик — одна проверка про одном слушателе. Что быстрее устанет, палец кликать или обработчик проверять, очевидно )

[imko]

Сергей Соколов, ну не будет в реальном проекте одного только слушателя клика

[Сергей Соколов]

imko, не о чем спорить. Делегирование событий не универсально и хорошо только под свои задачи.

[imko]

Сергей Соколов, да я и не спорю в общем то, просто подметил что если все подряд делегировать документу то будет вот так)