[JS] Level2 11-13강

ByeolGyu·2024년 6월 22일

목록 보기

6/17

✔ 이벤트 버블링과 이벤트 관련 함수

이벤트 버블링

어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상
click이라는 이벤트로 예를 들어보면,HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭됨
예시) p태그 안녕이라는 글자를 클릭하면 브라우저는 사용자가 클릭을 총 3번 했다고 인지

<div>			<!--3. 클릭했다고 인지-->
  <div>			<!--2. 클릭했다고 인지-->
    <p>안녕</p> <!--1. 클릭-->
  </div>
</div>

이벤트리스너 안에서 쓰는 이벤트 함수

이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면 이벤트관련 유용한 함수들을 사용가능
예) addEventListener('click', function(e))

document.querySelector('.black-bg').addEventListener('click', function(e){
	e.target;           // 실제 클릭한 요소(이벤트가 발생한 곳)
    console.log(e.target);

    e.currentTarget;    // 이벤트 리스너가 달린 곳
    this ;              // e.currentTarget와 같음

    e.preventDefaul();  // 이벤트 기본 동작을 막음 ex. 폼 전송 막음
                
    e.stopPropagation();// 내 상위요소로 이벤트 버블링 막아줌
})

모달창 배경을 누르면 닫히는 기능

<div class="black-bg">
  <div class="white-bg">
    모달창 내용
  </div>
</div>

- 모달창을 오픈할 때 show-modal 클래스 명을 넣어서 오픈했다면

document.querySelector('.black-bg').addEventListener('click', function(){
  document.querySelector('.black-bg').classList.remove('show-modal');
})

but) 검은 배경 뿐 아니라 흰 배경이나 글자 등을 클릭해도 다 닫히는 문제점
cuz) <div class="white-bg">를 클릭하면 <div class="black-bg">이것도 클릭했다고 인지해서 <div class="black-bg">에 붙어있던 이벤트 리스너가 동작

모달창 닫기 버그 해결

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

});

값을 확인 하고 비교해야 함
console.log(e.target);
console.log(document.querySelector('.black-bg'));
console.log($('.black-bg'));

✔ 이벤트 버블링 응용과 dataset(11강)

Tap 기능 함수로 축약

- 함수 장점

재사용이 편리
나중에 다른 사람이 읽었을 때도 이해하기 쉬움

- 함수로 코드를 쌀 때 안에 변수가 있으면 변수를 파라미터로 바꾸기

var button =  $('.tab-button');
var content =  $('.tab-content');

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

function openTap(tap){ // 함수로 코드를 쌀 때 안에 변수가 있으면 변수를 파라미터로 바꾸기
    button.removeClass('orange');
    button.eq(tap).addClass('orange');
    content.removeClass('show');
    content.eq(tap).addClass('show');
}

다른 방식으로 탭기능 만들기

이벤트 버블링을 알면 이벤트 리스너를 줄일 수 있음
<ul class="list"> 여기에 이벤트리스너 1개만 있어도 탭기능만들 수 있음
cuz. 어떤 버튼을 누르든 간에 <ul class="list">에 붙은 이벤트리스너도 동작하기 때문

<div class="container mt-5">
        <ul class="list">
          <li class="tab-button orange">Products</li>
          <li class="tab-button">Information</li>
          <li class="tab-button">Shipping</li>
        </ul>

        <div class="tab-content show">
          <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content">
          <p>스펙설명입니다. Information</p>
        </div>
        <div class="tab-content">
          <p>배송정보입니다. Shipping</p>
        </div>
      </div>

이벤트 리스너를 줄여서 코드를 짜는 이유

버튼이 많이 있을 때 이벤트 리스너를 줄이는 것이 덜 복잡
이벤트리스너를 줄이면 램용량을 절약가능 → 성능개선의 일환

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

function openTap(tap){
    button.removeClass('orange');
    button.eq(tap).addClass('orange');
    content.removeClass('show');
    content.eq(tap).addClass('show');
}

이렇게 만들 수 있으나 비효율적 → dataset 문법 사용하면 코드 짧게 가능

dataset 문법

html 안에 유저 몰래 정보를 숨겨놓을 수 있음
<div data-데이터이름="값"></div>
일반 유저는 모름

dataset 사용해 데이터 숨기기

data-id="0"으로 데이터 숨김

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

확인 방법

dataset 활용

지금누른 버튼을 찾고 싶으면 e.target
거기 숨어있는 data-id 꺼내고 싶으면 .dataset.id 붙이기

$('.list').click(function(e){

    // console.log((e.target.dataset.id));
    openTap(e.target.dataset.id);

})

function openTap(tap){
    button.removeClass('orange');
    button.eq(tap).addClass('orange');
    content.removeClass('show');
    content.eq(tap).addClass('show');
}