[JavaScript General] クリックされたリストの子要素のカスタムデータ属性を取得する

ID を付与した ul リストの子要素のクリックを検知し、data-* attributes を取得する。

<ul id='show'>
  <li>
    <a data-isbn='978-4-7741-4223-4' href=''>Apacheポケットリファレンス</a>
  </li>
  <li>
    <a data-isbn='978-4-7741-4076-6' href=''>3ステップでしっかり学ぶMySQL入門</a>
  </li>
</ul>
'use strict'
const list = document.getElementById('show');
list.addEventListener('click', show, false);
function show(event) {
  let target = event.target;
  alert(target.getAttribute('data-isbn'));
  event.preventDefault();
}

listaddEventListener で監視する。

EventTarget.addEventListener – Web API インターフェイス | MDN

event.target でクリックされた要素を検知する。

Event.target – Web API インターフェイス | MDN

カスタムデータ属性を getAttribute で取得する。

element.getAttribute – Web API インターフェイス | MDN

dataset は、IE11+ から利用できる。

alert(target.dataset.isbn);

HTMLElement.dataset – Web APIs | MDN

event.preventDefault でリンクのディフォルト動作(遷移)を停止する。

event.preventDefault – Web API インターフェイス | MDN

See the Pen JavaScript get custom data attributes of child elements by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺