[자바스크립트] 이벤트 버블링 응용과 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>

list라는 요소 안에 tab-button이 존재하기 때문에

 

이벤트리스너를 list에 하나만 달아서 3개의 버튼을 모두 조작가능하게 할 수 있다.

 

추가로, data-id="0" 처럼 뒤에 붙여놓은것이 보일 텐데

data-데이터이름="값" 의 형태로 데이터를 저장해둘 수 있다. 나중에 이를 활용하여 이벤트에 써 보자.

function tabOpen(i) {
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');

}

$('.list').on('click', function (e) {
    tabOpen(e.target.dataset.id);
});

e.target으로 실제로 누른 요소가 무엇인지 알 수 있다고 했다.

거기서 ".dataset.데이터이름"을 추가하게 되면 해당 데이터의 값이 나온다.

가령 data-id="0"이 쓰여 있는 버튼을 클릭하게 되면 e.target.dataset.id를 입력했을 때 0이 나온다는 것이다.

 

e.target.dataset.id 값을 tabOpen함수의 인자로 넘겨서 해당 버튼이 동작하도록 할 수 있다.