JS | 이벤트 객체와 dataset

dataset을 활용하여 값을 받아올 수 있다. 

dataset 은 data-으로 시작하고 , 뒤에 오는 이름은 자유롭게 작성한다.

dataset은 ""문자열로 지정하고 객체도 지정할 수 있다.

 

json 문자열을 js객체로 형변환하여 출력한다.

<h3>태그의 dataset의 속성 - 태그의 저장소</h3>
    <!--data-으로 시작하고, 뒤에 오는 이름은 자유롭게 작성-->
    <ul class="list">
        <li><a href="#" data-user-info='{"id":"1","age":"32"}'>아이린</a></li>
        <li><a href="#" data-user-info='{"id":"2","age":"27"}'>조이</a></li>
        <li><a href="#" data-user-info='{"id":"3","age":"28"}'>슬기</a></li>
        <li><a href="#" data-user-info='{"id":"4","age":"28"}'>웬디</a></li>
        <li><a href="#" data-user-info='{"id":"5","age":"24"}'>예리</a></li>
    </ul>
    결과 : <div class="result"></div>

 var list = document.querySelector('.list');
        var re = document.querySelector('.result');
        list.onclick = function(){
            //1.
            event.preventDefault();
            //2.
            if(event.target.tagName != 'A')return;
            //3.data- 으로 만들어진 속성은 태그에서 찾아 쓸 수 있습니다.
            // console.dir(event.target);
            // console.dir(event.target.dataset);
            // console.dir(event.target.dataset.userInfo);

            var data = event.target.dataset.userInfo;

            var result = JSON.parse(data); //err
            console.log(result);

            re.innerHTML = JSON.stringify(result);
        }