자바스크립트 event 속성값 추출 dataset

[dataset]
HTML태그의 Attribute(prop) 속성에 값을 싣고 자바스크립트를 통해 값을 불러올때 dataset을 사용한다. 
형태는 아래코드와 같다.

<script>
    //ex code 1.
    window.onload = function () {
        document.getElementById("test").addEventListner('click', function(){
            console.log(e.target.dataset.value);
        });
    }
    
    //ex code 2.
    window.onload = function () {
        document.getElementById("test").onclick = function () {
            console.log(e.target.dataset.value);
        }
    }
    
    //ex code 3.
    $(document).ready(function(){
        $("#test").click(function(e){
            console.log(e.target.dataset.value);
        });
    });

});
</script>

<div id="test" data-value="test"></div>

우선 HTML 태그에서 data-'속성명' 의 형태로 속성을 기제하고 값을 부여한다.
이후 자바스크립트에서 이벤트객체를 통해 값을 추출할 때 e.target.dataset.'속성명' 으로 접근할 수 있게 된다.


https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes