탭기능 만들며 배우는 for 반복문 2

안녕하세요 선생님
탭기능 만들며 배우는 for 반복문 2에서 for문 실행 순서가 잘 이해가 안돼서 질문드립니다.

강의 설명에서 자바스크립트가 처음 실행될 때 for문 안의 이벤트 리스너를 만나면 실행하지 않고 지나간다고 했는데요.

var count = document.getElementsByTagName('li');

for (let i = 0; i < count.length; i++){
  console.log(i);
  $('.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문 자체는 자바스크립트가 처음 실행될 때 이벤트리스너와 관계 없이 3번 반복한다는 것을 확인했습니다.

그럼 사용자가 탭 버튼을 클릭해서 이벤트 리스너가 실행되면 for문이 다시 실행돼서 3번을 반복하는건가요?
아니면 for문 내의 이벤트 리스너 코드만 실행되는 건가요?

답변 부탁드립니다. 감사합니다.