이벤트 버블링을 이용하여 탭 버튼 수정하기

• 목적
  • ul tag 한 개, li tag 여러 개이다.
  • 현재는 li에 클릭 이벤트가 설정되어 있기 때문에 메모리를 많이 잡아먹는다.
  • 한 개있는 ul에 클릭 이벤트를 설정하면, 메모리를 덜 잡아먹는다.

<ul class="list">
  <li class="tab-button product-button">Products</li>
  <li class="tab-button active information-  button">Information</li>
  <li class="tab-button shipping-button">Shipping</li>
  <li class="tab-button shipping-button">Price</li>
</ul>

• ul에 클릭이벤트를 설정한다.
  • 실제로 클릭한 곳이 li tag면, 조건문을 실행시킨다.
    • e.target === document.querySelector(".tab-button"

function tabButtonClick(i) {
  $(".tab-button").removeClass("active");
  $(".tab-button").eq(i).addClass("active");

  $(".tab-content").removeClass("show");
  $(".tab-content").eq(i).addClass("show");
}

$(".list").on("click", function (e) {
//버전1
for (let i = 0; i < $(".tab-button").length; i++) {
  if (e.target === document.querySelectorAll(".tab-button")[i]) {
    tabButtonClick(i);
  }
});