자바스크립트 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');

});
}