jQueryを使わずにdata-*属性の値を取得する #JavaScript

クリックイベントされた要素のdata-*属性を取得する方法
こんなHTMLがあったとして・・・

    <ul id="list">
        <li class="val" data-val="val-1">Click Me</li>
        <li class="val" data-val="val-2">Click Me</li>
        <li class="val" data-val="val-3">Click Me</li>
    </ul>

こんな感じで取得可能。

(()=>{
    // クリックイベントを定義
    for(const el of document.querySelectorAll(".val")){
        el.addEventListener("click", getDataAttr)
    }
})();

function getDataAttr(){
    console.log(this.dataset.val);
}

ただし、アロー関数とfor..ofはie11非対応なので、対応する必要がある場合は通常の即時関数とfor文で対応する必要がある。