[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();
}
list
を addEventListener
で監視する。
event.target
でクリックされた要素を検知する。
カスタムデータ属性を getAttribute
で取得する。
dataset
は、IE11+ から利用できる。
alert(target.dataset.isbn);
event.preventDefault
でリンクのディフォルト動作(遷移)を停止する。
See the Pen JavaScript get custom data attributes of child elements by DriftwoodJP (@DriftwoodJP) on CodePen.