이벤트 버블링과 이벤트관련 함수들, 응용과 dataset

특정이벤트를 사용(class 추가,삭제등) 같은 방식을 사용해야하고 html 위치 아래 코드 작성해야함 

이벤트 버블링

이벤트가 상위 html로 퍼지는 현상

 

<div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <form action="success.html">
            <div class="my-3">
              <input type="text" id = "id-value" class="form-control">
             </div>
             <div class="my-3">
               <input type="password" id = "password-value" class="form-control">
             </div>
             <button type="submit" class="btn btn-primary" id = "send">전송</button>
             <button type="button" class="btn btn-danger" id="close">닫기</button>
          </form> 

          
        </div>
      </div>

 

다음 코드를 예시로 보자 

''black-bg" 클래스를 가진 div 추가로 하위의 div가 있다 

만약 "white-bg"에 이벤트가 발생할시에 그 이벤트가 상위 html "black-bg" 까지 퍼지는 것이다.

 

이벤트관련 함수들

document.querySelector('.black-bg').addEventListener('click',function(e){

    e.target; //유저가 실제로 누른거
    e.currentTarget //이벤트리스너 달린 곳 
    this; 
    e.preventDefault(); //이벤트의 기본동작 막아줌
    e.stopPropagation(); //내 상위요소로 이벤트 버블링 막아줌


})

// 콜백함수의 인자(e)로 다양한 메소드 사용 가능

 

 

*if 문 사용할때 비교대상의 자료형 고려할것.

 

 

이벤트 버블링 응용과  dataset

 

코드를 함수로 축약할때 그 안에 변수가 있다면 함수의 파라미터이용

 

이벤트 리스너 줄여서 코드짜기 

> 램용량을 아끼는 이점이 있음

$('.list').click(function(e){
    if (e.target == document.querySelectorAll('.tab-button')[0]){
        openTab(0)
    }
})

특정클릭을 통해 접근하는게 아닌 이벤트 버블링을 통해 접근후 if 문을 통해 비교함 

 

dataset

html 태그에 몰래 정보숨기기 가능함

data-자료이름 ="값"

 

더 간단하게 하기

   if (e.target == document.querySelectorAll('.tab-button')[0]){
        openTab(0)
    }
    if (e.target == document.querySelectorAll('.tab-button')[1]){
        openTab(1)
    }
    if (e.target == document.querySelectorAll('.tab-button')[2]){
        openTab(2)
    }
    
    //이렇게 데이터 비교를 하드코딩하지말고 
    //dataset을 이용해서 현재 누른버튼 dataset 값을 가져와 openTab(현재누른버튼)에 넣으면 된다
    
    openTap(e.target.dataset.id)