자바스크립트 for문 질문 드립니다.

[김윤중]

아래는 수업중 탭 3개를 클릭하면 탭의 클래스를 탈부착하는 소스인데요, 제가 궁금한건 

for문안에 이벤트 리스너(클릭)가 있으면 클릭시 for문이 실행되는건가요?? 이거 실행하면 콘솔에 i=0,1,2 찍히고 

클릭을 하면 콘솔없이 그냥 function이 동작하더라구요.. 인간이 이해하는 순서는 클릭>for문 일거같은데..어떤 원리인가요??

 

for (let i = 0; i < 3; i++) {
console.log(i);
$('.tab-button').eq(i).on('click', function() {

$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');

$('.tab-button').eq(i).addClass('orange');

$('.tab-content').eq(i).addClass('show');

});
}

[codingapple]

컴퓨터는 for 반복문 발견하면 안에 있는 코드 3번 싹 실행해주고 지나갑니다

반면 이벤트리스너 안의 코드는 클릭시 실행됩니다 

[김윤중]

[codingapple]

그냥 코드 3번 복사붙여넣기한거라고 생각하면 쉽습니다 

<script>태그안에 이벤트리스너 3개 각각 적은거랑 똑같습니다 

[김윤중]

아 감사합니다~

[글쓴이]

글