[ javascript] 16. 이벤트 버블링 응용 & dataset

앞의 포스팅에서 구현한 탭 메뉴이다

<div class="container mt-5">
    <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button orange">Information</li>
        <li class="tab-button">Shipping</li>
    </ul>
</div> 

<script>
for (let i = 0; i < $('.tab-button').length; i++) {
    $('.tab-button').eq(i).on('click', function () {
        console.log($('.tab-button').length)
        $('.tab-button').removeClass('orange')
        $('.tab-button').eq(i).addClass('orange')
        $('.tab-content').removeClass('show')
        $('.tab-content').eq(i).addClass('show')
    })
}
</script>

버튼 리스트 각각에 이벤트 리스너를 각각 발생시키고 있다

➡️ 이벤트 버블링 활용하여 이벤트리스너 줄이기

• 복잡함 감소
• 이벤트리스너를 줄이면 램용량을 절약 가능 ==> 성능개선

---

이벤트 버블링으로 이벤트 리스너 줄이기

버블링 특성으로 인해 tab-button 에 걸어놓은 이벤트 리스너는 부모요소인 list 에도 동작한다

이를 이용하여 tapOpen 함수를 만들어 탭 클릭 시 작동 되어야 하는 동작들을 모아놓았다

$('.list').click(function (e) {
    if (e.target == document.querySelectorAll('.tab-button')[0]) {
        tapOpen(0)
    }
    if (e.target == document.querySelectorAll('.tab-button')[1]) {
        tapOpen(1)
    }
    if (e.target == document.querySelectorAll('.tab-button')[2]) {
        tapOpen(2)
    }
})

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

하지만 여전히 길고 효율적이지 못한 코드
➡️ dataset을 통해 더 간결하게 사용 가능하다

dataset

인터넷 익스플로러 11+에서 동작

html 내 태그 안에 정보를 담는 것이다

<div data-NAME="value"></div>
<script>
document.querySelector().dataset.NAME;
</script>

적용하기

우선 html 태그에 dataset을 입력한다
나는 data-id 라는 이름으로 버튼을 구분하는 숫자를 담았다

<div class="container mt-5">
    <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>
</div> 

그리고 클릭 이벤트가 발생하면 클릭한 버튼에 대해서 e.target.dataset.id 값으로 함수 작동하게 했다

$('.list').click(function (e) {
    openTab(e.target.dataset.id)
})

e.target 로 지금 누른 버튼 요소를 찾고
.dataset.id 로 data-id 사용

🤔 jQuery로 dataset 사용하는 방법은 ?

1. 값 설정

<div id="myDiv" data-name="John" data-age="30"></div>

$('#myDiv').data('name', 'Alice');
$('#myDiv').data('age', 25);

2. 값 출력

$('#myDiv').data('name')