[JavaScript / jQuery] 이벤트 버블링 응용과 dataset 활용하기

💡 실습 포인트!

• 오늘은 이전에 만들었던 탭 기능 부분의 코드를 조금 개선해보았다.

---

💜 JavaScript : 기존

for (let i = 0; i < $('.tab-button').length; i++){
        $('.tab-button').eq(i).on('click', function(){
            $('.tab-button').removeClass('active');
            $('.tab-content').removeClass('show');
            $('.tab-button').eq(idx).addClass('active');
            $('.tab-content').eq(idx).addClass('show');
    })
}

• 기존의 JavaScript 코드는 for 문 안에 넣을 기능들을 단순히 나열한 것이었다.

---

💜 JavaScript : 1차 수정

function openTab(idx){
    $('.tab-button').removeClass('active');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(idx).addClass('active');
    $('.tab-content').eq(idx).addClass('show');
}

for (let i = 0; i < $('.tab-button').length; i++){
        $('.tab-button').eq(i).on('click', function(){
            openTab(i);
    })
}

• 1차로 수정한 버전은 얼핏보면 코드가 많아졌지만... 탭을 활성화하는 기능의 코드를 따로 함수로 분리한 후, 해당 함수를  for 문 안에 넣어서 함수명을 보고 어떤 기능인지 바로 추측이 가능하도록 좀 더 명료하게 코드를 구성하였다.

---

💜 JavaScript : 2차 수정

• 2차로 수정한 버전은 이벤트 버블링 현상과 dataset을 활용하였다.
• 우선 이벤트 버블링을 정의하자면, 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위에 해당하는 화면 요소들로 연달아 전달되어 가는 특성을 의미한다. (참고로 이벤트 캡처링은 이 반대현상을 의미한다.)

    <div class="container mt-5">
        <ul class="list">
            <li class="tab-button active" data-id="0">Products</li>
            <li class="tab-button" data-id="1">Information</li>
            <li class="tab-button" data-id="2">Shipping</li>
        </ul>
    
        <div class="tab-content show">
            <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content">
            <p>상품정보입니다. Info</p>
        </div>
        <div class="tab-content">
            <p>배송정보입니다. Shipping</p>
        </div>
    </div>

• 즉, tab-button 을 클릭하면 그 tab-button 클래스를 묶고 있는 list 클래스로 클릭 이벤트가 전달되고, 또 그 위의 container 클래스에 클릭 이벤트가 전달되는 것이다.

function openTab(idx){
    $('.tab-button').removeClass('active');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(idx).addClass('active');
    $('.tab-content').eq(idx).addClass('show');
}

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

// e.target : 지금 실제로 클릭한 요소, JavaScript 문법
// e.currentTarget : 지금 이벤트리스너가 달려있는 요소, JavaScript 문법
// this : e.currentTarget 과 동일, JavaScript 문법
// $(this) : e.currentTarget 과 동일, jQuery 문법
// e.preventDefault() : 기본동작을 막는 함수, JavaScript 문법

• 그래서 이벤트 버블링을 응용하자면 tab-button 을 클릭하면 어차피 list 클래스가 클릭될테니, 아예 list 클래스에 클릭이라는 이벤트리스너를 달아버리는 것이다.
• 그리고 list 클래스의 하위 클래스인 tab-button 클래스는 여러 개가 존재하므로, 사용자가 실제로 클릭한 tab-button 이 어떤 것인지 확인하여 그에 해당하는 탭을 openTab 함수를 이용하여 활성화해야 한다.
• 그렇다면 여기서 의문이 생긴다. 왜 굳이.. tab-button 클래스에 이벤트리스너를 달면 될 것을, list 클래스에 다는 것일까?
  • 그 이유는 tab-button 에 이벤트리스너를 다는 경우 총 3개의 이벤트리스너가 필요하지만 list 클래스에 달면 1개의 이벤트리스너만 사용하게 되는데, 이렇게 이벤트리스너를 줄이면 우선적으로 코드양이 줄고, 반복문을 쓰지 않아도 되며, 램을 덜 사용한다는 장점이 있다.
• 여기다 dataset 을 사용하면 훨씬 코드가 줄어든다.
  • 우선 html 파일에서 원하는 태그에 data-작명="값" 을 적는다. (이 부분은 개발자만 알 수 있는 부분이다.)
  • 사용하고자할 때는 JavaScript 로 해당 요소를 찾은 다음 뒤에 .dataset.작명 을 붙이면 값이 출력된다.
• 그래서 만약 사용자가 누른 탭이 첫번째 탭이라면, e.target 은 document.querySelectorAll('.tab-button')[0]이 되고 그것의 dataset.id 는 0 이므로 openTab(0) 이 실행되어 첫번째 탭의 타이틀이 활성화되면서 해당 내용이 보이게 되는 것이다.