[중요] Level 2 : 14,15(숙제 및 깨달은 점)_for, 버블링활용축약버전

14. 탭 만들기

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

깨달은 점

for문의 작동 원리에 대해서 이해가 잘 가지 않았다.

i가 0이고, 3까지 i++로 돌아가는 거면 i에는 순서대로 0,1,2 배정되는 것 아닌가?
왜 클릭한 탭의 인덱스를 찾아서 그 인덱스에 함수가 실행되는거지?

처음에는 eq가 메소드라서 내가 누른 탭의 인덱스를 찾아주나 했다.

그런데 전역변수 kcnt 를 설정해 alert를 뿌리고 나니, kcnt alert가 브라우저를 새로고침한 순간에 0,1,2까지 돌고 그 후엔 탭을 클릭해도 alert가 뜨지 않는 것이었다!

답은 js가 정적 언어이기 때문이었다.

내가 클릭을 했을 때 -> for문이 만들어져 도는 게 아니라, 브라우저가 로딩된 시점에서 -> 이미 i가 length까지 돌아서 -> for문 안의 이벤트리스너 함수 안의 i에 값이 0~2까지 뿌려져있고, 그게 클릭한 시점에 콜백함수로 불러와져 실행되는 것이었다.

for문의 작동원리에 대해 확실하게 짚고 넘어간 보람찬 순간이었다.

---

함수축약버전

for (let i = 0; i < $('.tab-button').length; i++) {
    $('.tab-button').eq(i).on('click', function () {
        openTab(i);
    })
    // $('.tab-button').eq(i).on('click', openTab(i)) //이렇게 해도 됨.
}

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

---

이벤트버블링활용버전

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

//버블링이 일어나는 for문버전 1
$('.list').click(function(e){
    for (let i = 0; i < $('.tab-button').length; i++) {
        if(e.target == document.querySelectorAll('.tab-button')[i]){
            openTab(i);
        } else {e.preventDefault;}
    }
})
//위와 똑같이 동작하는 버블링이 일어나는 for문버전 2
for (let i = 0; i < $('.tab-button').length; i++) {
    $('.list').click(function(e){
        if(e.target == document.querySelectorAll('.tab-button')[i]){
            openTab(i);
        } else {e.preventDefault;}
    })
}
//*****dataset 활용 버전 (<---너무편하고)******
$('.list').click(function(e){
    openTab(e.target.dataset.id);
})

마지막 dataset 활용 버전이 참으로 짧고 편한 게 맘에 든다.
+ 포문버전이 이벤트안에 포문을넣든 포문안에 이벤트를 넣든 동일하게 동작했다..

---

15. 모달창 검은배경 누르면 꺼지기

조건

흰색 모달창부분은 눌러도 꺼지지 않게 한다

let btn = document.querySelector('.btn-primary');
let modal = document.querySelector('.black-bg');
let clickEvent = function(e){
    if (e.target == this){ //this는 e.currentTarget으로도 쓸 수 있다.
        modal.classList.toggle('show');
    } else {e.preventDefault();}
}
btn.addEventListener('click', clickEvent)
modal.addEventListener('click', clickEvent)

깨달은 점

이벤트 버블링은 요소에 이벤트가 실행되었을 때 그 요소의 상위요소까지 이벤트가 실행되는 것이다. 이벤트 버블링은 항상 일어나고, 다양한 관련 함수를 사용하면 좋다.

이에 관해 정리한 글 : https://sunshineyellow.tistory.com/92

[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들

---

출처 : 코딩애플 https://codingapple.com/