for 반복문으로 코드 n배 절약해보기 + 이벤트버블링

버튼을 클릭 할 때마다 버튼의 style과 상세설명이 바뀌어야한다.

각각 버튼에 이벤트리스너를 달아 코딩하면 아래와 같다.

 

const btnAll = document.querySelectorAll('.tab-button');
const boxAll = document.querySelectorAll('.tab-content');

btnAll[0].addEventListener('click', function () {
  btnAll[0].classList.remove('orange');
  btnAll[1].classList.remove('orange');
  btnAll[2].classList.remove('orange');
  btnAll[0].classList.add('orange');
  boxAll[0].classList.remove('show');
  boxAll[1].classList.remove('show');
  boxAll[2].classList.remove('show');
  boxAll[0].classList.add('show');
});

btnAll[1].addEventListener('click', function () {
  btnAll[0].classList.remove('orange');
  btnAll[1].classList.remove('orange');
  btnAll[2].classList.remove('orange');
  btnAll[1].classList.add('orange');
  boxAll[0].classList.remove('show');
  boxAll[1].classList.remove('show');
  boxAll[2].classList.remove('show');
  boxAll[1].classList.add('show');
});

btnAll[2].addEventListener('click', function () {
  btnAll[0].classList.remove('orange');
  btnAll[1].classList.remove('orange');
  btnAll[2].classList.remove('orange');
  btnAll[2].classList.add('orange');
  boxAll[0].classList.remove('show');
  boxAll[1].classList.remove('show');
  boxAll[2].classList.remove('show');
  boxAll[2].classList.add('show');
});

 

하지만 자세히 보면 버튼의 숫자만 바뀔 뿐 다른건 똑같기 때문에, 이는 for문을 사용해서 코드를 획기적으로 줄일 수 있다.

for (let i = 0; i < 3; i++) {
  btnAll[i].addEventListener('click', function () {
    btnAll[0].classList.remove('orange');
    btnAll[1].classList.remove('orange');
    btnAll[2].classList.remove('orange');
    btnAll[i].classList.add('orange');
    boxAll[0].classList.remove('show');
    boxAll[1].classList.remove('show');
    boxAll[2].classList.remove('show');
    boxAll[i].classList.add('show');
  });
}

0부터 3 전까지, 즉 총 3번을 반복실행하면서 i에 0,1,2를 넣어주고 있다.

 

 

여기서 나중에 탭의 갯수가 더 추가되어도 잘 동작하는 코드로 만들려면 어떻게 해야할까? 

이는 i < 3으로 '3 미만까지 반복해주세요' 라고 하드코딩했던것을 'tab-content라는 클래스를 가진 요소의 갯수만큼 반복해주세요' 라고 바꾸면 된다.

for (let i = 0; i < btnAll.length; i++) {
  btnAll[i].addEventListener('click', function () {
    btnAll[0].classList.remove('orange');
    btnAll[1].classList.remove('orange');
    btnAll[2].classList.remove('orange');
    btnAll[i].classList.add('orange');
    boxAll[0].classList.remove('show');
    boxAll[1].classList.remove('show');
    boxAll[2].classList.remove('show');
    boxAll[i].classList.add('show');
  });
}

 

아래와 같이 함수로 만들어 더 보기좋게 만들어볼 수도 있다.

for (let i = 0; i < btnAll.length; i++) {
  btnAll[i].addEventListener('click', function () {
    openTap(i);
  });
}

function openTap(a) {
  btnAll[0].classList.remove('orange');
  btnAll[1].classList.remove('orange');
  btnAll[2].classList.remove('orange');
  btnAll[a].classList.add('orange');
  boxAll[0].classList.remove('show');
  boxAll[1].classList.remove('show');
  boxAll[2].classList.remove('show');
  boxAll[a].classList.add('show');
}

 

 

정말 마지막으로!!!

 

코드 길이는 줄었지만 결국 성능적으로 봤을 때 이벤트리스너를 n번 실행한다는것은 변함없다.

이때는 부모요소에 이벤트를 한번만 주고 if문을 넣어서 이벤트를 단 한번만 넣고 모든 탭을 열 수 있다!

function openTap(a) {
  btnAll[0].classList.remove('orange');
  btnAll[1].classList.remove('orange');
  btnAll[2].classList.remove('orange');
  btnAll[a].classList.add('orange');
  boxAll[0].classList.remove('show');
  boxAll[1].classList.remove('show');
  boxAll[2].classList.remove('show');
  boxAll[a].classList.add('show');
}

list.addEventListener('click', function (e) {
  if (e.target == btnAll[0]) {
    openTap(0);
  }
  if (e.target == btnAll[1]) {
    openTap(1);
  }
  if (e.target == btnAll[2]) {
    openTap(2);
  }
});