자바스크립트 기초 (7)

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

이벤트 함수

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target; //실제 클릭한 요소
  e.currentTarget // 이벤트 리스너가 부착된 곳
  this; //e.currentTarget와 동일함
  e.preventDefault() //이벤트 기본 동작 막기
  e.stopPropagation() // 상위 요소의 이벤트 버블링 막기
})

☞ function 안에 e를 넣으면 이벤트 함수를 사용 할 수 있다.

모달창 검은 화면 누르면 모달창 닫기

document.querySelector('.black-bg').addEventListener('click', function(e){
  if(e.target == document.querySelector('.black-bg') ) {
    document.querySelector('.black-bg').classList.remove('show-modal')
  }  
})

☞ 검은 화면 클래스를 찾아서 이벤트 리스너를 붙여서 show-modal이라는 클래스를 없애서 사라지게 하는 형식
☞ if문이 들어가는 이유는 검은배경 클릭이 아닌 하얀배경이나 다른 요소를 클릭해도 검은배경을 클릭한걸로 인식하는 이벤트 버블링 현상때문에 실제 클릭한 요소일 경우에만 닫도록 해야하기 때문이다.

이벤트 버블링

모든 웹 브라우저는 이벤트 버블링이 발생함.
이벤트 버블링은 하위의 html요소를 클릭해도 상위 html요소로 퍼지는 현상

탭 제이쿼리 축약하기

[HTML]

 <div class="container mt-5">
    <ul class="list">
      <li class="tab-button">Products</li>
      <li class="tab-button orange">Information</li>
      <li class="tab-button">Shipping</li>
      <li class="tab-button">Shipping2</li>
    </ul>
    <div class="tab-content">
      <p>상품설명입니다. Product</p>
    </div>
    <div class="tab-content show">
      <p>스펙설명입니다. Information</p>
    </div>
    <div class="tab-content">
      <p>배송정보입니다. Shipping</p>
    </div>
    <div class="tab-content">
      <p>배송정보2입니다. Shipping2</p>
    </div>
  </div>

[JS]

    for(let i = 0; i < $('.tab-button').length; i++){
      $('.tab-button').eq(i).on('click',function(){
        탭열기(i)
      })
    }

    function 탭열기(숫자){
      $('.tab-button').removeClass('orange');
        $('.tab-button').eq(숫자).addClass('orange');
        $('.tab-content').removeClass('show');
        $('.tab-content').eq(숫자).addClass('show');
    }

☞ 이런식으로 함수를 사용해서 축약이 가능하다.
☞ 함수를 축약할때 변수가 있으면 파라미터로 바꿔야 작동이 된다.

탭 이벤트 리스너 줄이기

이벤트 리스너를 줄이면 줄일수록 램을 절약 할 수 있다.

document.querySelector('.list').addEventListener('click', function(e){
        if(e.target == document.querySelectorAll('.tab-button')[0]){
          탭열기(0);
        }
        else if(e.target == document.querySelectorAll('.tab-button')[1]){
          탭열기(1) 
        }
        else if(e.target == document.querySelectorAll('.tab-button')[2]){
          탭열기(2)
        }
      })

    function 탭열기(숫자){
      $('.tab-button').removeClass('orange');
        $('.tab-button').eq(숫자).addClass('orange');
        $('.tab-content').removeClass('show');
        $('.tab-content').eq(숫자).addClass('show');
    }

태그 안에 정보 숨기기

data-자료이름="값"

 <ul class="list">
 <li class="tab-button" data-작명="값">Products</li>
 </ul>

☞ 출력은 셀렉터.dataaset.자료이름
예시 : document.querySelector('.tab-button').dataset.id //0 출력

그러면 이렇게 if문 없이 탭 축약도 가능

 <ul class="list">
      <li class="tab-button" data-id="0">Products</li>
      <li class="tab-button orange" data-id="1">Information</li>
      <li class="tab-button" data-id="2">Shipping</li>
      <li class="tab-button" data-id="3">Shipping2</li>
 </ul>

 document.querySelector('.list').addEventListener('click', function(e){
        탭열기(e.target.dataset.id)
      })

    function 탭열기(숫자){
      $('.tab-button').removeClass('orange');
        $('.tab-button').eq(숫자).addClass('orange');
        $('.tab-content').removeClass('show');
        $('.tab-content').eq(숫자).addClass('show');
    }

☞ html에 data 자료를 넣어서 출력할 수 있음. console.log(e.target.dataset.id)도 출력 가능함

오늘의 한줄평 : 이벤트 버블링이랑 data 자료 숨기기가 새로웠음.

출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui