[JavaScript General] クリックされたリストの子要素のカスタムデータ属性を取得する
ID を付与した ul リストの子要素のクリックを検知し、data-* attributes を取得する。
[markdown]
“`html
“`
“`javascript
‘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` で監視する。
> [EventTarget.addEventListener – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
`event.target` でクリックされた要素を検知する。
> [Event.target – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/target)
カスタムデータ属性を `getAttribute` で取得する。
> [element.getAttribute – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute)
`dataset` は、IE11+ から利用できる。
“`javascript
alert(target.dataset.isbn);
“`
> [HTMLElement.dataset – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
`event.preventDefault` でリンクのディフォルト動作（遷移）を停止する。
> [event.preventDefault – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/event/preventDefault)
See the Pen JavaScript get custom data attributes of child elements by DriftwoodJP (@DriftwoodJP) on CodePen.
## 補遺
> * [イベントハンドラ と イベントリスナ | deadwood](https://www.d-wood.com/blog/2016/08/09_8388.html)
> * [HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 – ROCHAS](http://dresscording.com/blog/html5/custom_data_attribute.html)
[/markdown]