javascript기초(dataset 문법)

<div data-데이터이름="값"></div>

 

다음과 같이 html 안에 유저 몰래 정보를 숨겨놓을 수 있는데

 

document.querySelector().dataset.데이터이름;

 

이렇게 요소에 숨겨놨던 데이터가 해당 자리에 남는다.

 

---

dataset 문법을 이용한 탭기능

 

<ul class="list">
    <li class="tab-button" data-id="0">Products</li>
    <li class="tab-button orange" data-id="1">Information</li>
    <li class="tab-button" data-id="2">Shipping</li>
 </ul>

 

다음과 같이 버튼에 id = "n" 라는 값을 숨겨놓았다.

 

function 탭열기(숫자){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(숫자).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(숫자).addClass('show');
}

$('.list').click(function(e){

    탭열기(e.target.dataset.id);

});

 

.list에 이벤트리스너를 부착한 이유는 이벤트버블링 현상을 응용한 것이다.

 

li 태그를 감싸고 있는 ul태그를 클릭해도 tab 버튼도 눌러졌다고 인식하기 때문

이렇게 코드를 짜는 유이는

 

- 버튼이 몇십개 있다면 이렇게 짜는게 덜 복잡하고

- 이벤트리스너를 줄이면 램용량을 절약할 수 있다.(성능개선)

 

tab-button data-id="0" 을 클릭했을 경우

.list에 이벤트 리스너가 실행되어 탭열기의 ()파라미터에 (data-id="0")가 담아 탭열기 함수를 실행하게 된다.