16. [jQuery] 이벤트 버블링을 활용한 tab기능 제작

안녕하세요 이번 포스팅에서는 이벤트 버블링을 활용하여 이벤트 리스너를 줄이는 방법에 대해서 알아보도록 하겠습니다. 

 

포스팅 14에서는 Tab 기능을 구현하는 방법 

포스팅 15에서는 이벤트 버블링을 참고하면 좋을 것 같습니다. 

 

포스팅 14에서 Tab 기능을 구현 할 때에는 .tab-button 에 3개의 이벤트 리스너를 달았었습니다. 

하지만 이렇게 이벤트 리스너를 달게 될 경우에는 메모리를 많이 잡아먹기 때문에 좋은 방법은 아닙니다. 

따라서, 이번 포스팅에서는 지난 포스팅 15포스팅에서 배운 이벤트 버블링을 활용하여 1개의 이벤트 리스너를 달아서 동일하게 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다. 

 

총 2가지 방법이 존재하는데 [tab 열기] 함수는 이전 포스팅을 참고해주시면 감사하겠습니다. 

 

HTML

    <div class="container mt-5">
        <ul class="list">
            <li class="tab-button tab-btn-active">tab1</li>
            <li class="tab-button">tab2</li>
            <li class="tab-button">tab3</li>
            <li class="tab-button">tab4</li>
        </ul>

        <div class="tab-content tab-content-show">
            <p>tab1에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab2에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab3에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab4에 대한 설명 블라블라~</p>
        </div>
    </div>

 

JQuery 탭열기 함수

function 탭열기(몇번째) {
            // 나머지 모든 tab에 대해서 class를 제거한다.(eq를 안달면 모든 해당 class가 선택되어 remove할 수 있다.) 
            $('.tab-button').removeClass('tab-btn-active');
            $('.tab-content').removeClass('tab-content-show');
            // 제거 이후에 tab에서 0번째 탭에 class를 추가한다. 
            $('.tab-button').eq(몇번째).addClass('tab-btn-active');
            $('.tab-content').eq(몇번째).addClass('tab-content-show');
        }

 

이벤트 버블링을 활용하여 이벤트 리스너를 줄이는 방법

[공통 사항] 

: 상위 요소인 .list 에 이벤트 리스너를 달아줍니다. (이벤트 버블링)

이전에는 .tab-button 에 이벤트 리스너를 달았기에 메모리를 많이 잡아 먹기 때문입니다. 

 

방법 1. querySelectorAll + 조건문

        $('.list').click(function(e){
            console.log(e.target); // <li data-brackets-id="312" class="tab-button">tab2</li>
            
//            만약에 실제 누른 버튼 요소가 0이면 0번 탭을 열어라
            if(e.target == document.querySelectorAll('.tab-button')[0]){
                    탭열기(0);
               }
//            만약에 실제 누른 버튼 요소가 1이면 1번 탭을 열어라
            else if(e.target == document.querySelectorAll('.tab-button')[1]){
                    탭열기(1);
            }
            else if(e.target == document.querySelectorAll('.tab-button')[2]){
                    탭열기(2);
            }
            else if(e.target == document.querySelectorAll('.tab-button')[3]){
                    탭열기(3);
            }
        })

 

만약, user 가 1번 탭을 눌렀다면

console.log(e.target)에 의해서 

2번 tab이 콘솔에 찍히는 것을 확인 할 수 있습니다. 

하지만 해당 방법은 탭을 추가하게 되면 코드를 계속 늘려가야 하는 단점이 존재합니다. 

 

방법 2. data-id = 'value' 

결국에는 tab 버튼을 눌렀을 때, 해당 탭이 몇 번째 탭인지 아는 것이 핵심입니다. 

위의 방법 처럼 여러가지 상황에 대해 조건문으로 접근 하는 방법도 있겠지만 HTML 내에 정보를 심는 방법도 존재합니다. e.target을 console.log에 찍었을 때 결국 해당 태그가 몇 번째 탭인지 그 번호만 알면 다양한 조건문을 구현 할 필요성이 적어집니다.

 

[HTML 내에 정보를 심는 방법] data-작명='값'

[해당 정보를 빼내는 방법] 셀렉터.dataset.작명

 

HTML

▷ tab-button 에 data-id를 심어서 해당 버튼이 몇 번째 버튼인지 알 수 있게끔 설정하였습니다. 

 <div class="container mt-5">
        <ul class="list">
            <li class="tab-button tab-btn-active" data-id='0'>tab1</li>
            <li class="tab-button" data-id='1'>tab2</li>
            <li class="tab-button" data-id='2'>tab3</li>
            <li class="tab-button" data-id='3'>tab4</li>
        </ul>

        <div class="tab-content tab-content-show">
            <p>tab1에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab2에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab3에 대한 설명 블라블라~</p>
        </div>
        <div class="tab-content">
            <p>tab4에 대한 설명 블라블라~</p>
        </div>
    </div>

 

jQuery

$('.list').click(function(e){
	var 현재누른버튼 = e.target.dataset.id; // 몰래 심어놨던 data-id='value'를 꺼내서 사용하는 방법
	console.log(현재누른버튼);
	탭열기(현재누른버튼);
});

 

2번째 탭을 눌렀을 때 콘솔창에 1이 찍힘을 확인 할 수 있습니다.