이벤트 버블링 응용과 dataset

조 은길·2022년 6월 4일
0
post-thumbnail

이벤트버블링을 알고계시면 이벤트리스너를 줄여가며 개발할 수도 있습니다.

필수나 그런건 아니고 알면 언젠가 도움되는 내용이기 때문에

전에 만들었던 탭기능을 다시 만들어봅시다. 원래 복습을 해야 실력이 느는 것임

for (let i = 0; i < $('.tab-button').length; i++){

  $('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })

});

전에 만들었던 탭기능 함수로 축약해보기

함수쓰면 긴 코드를 짧은 단어하나로 축약할 수 있다고 했습니다.

그래서 탭만들 때 썼던 4줄의 코드를 함수로 축약해볼 것입니다.

별 이유는 없고 깔끔해보일 것 같으니까요

실은 함수로 넣으면 1. 재사용이 편리하고 2. 나중에 남이 읽었을 때도 뭔가 이해가 쉬울 수 있습니다.

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');
}

Q. 왜 구멍뚫음?

A. 함수로 코드를 싸맬 때 안에 변수가 들어있으면 변수를 전부 파라미터로 바꾸는게 좋습니다.

그래야 잘 동작합니다. 그래서 i 부분을 전부 파라미터로 바꿨습니다.

이제 함수 사용할 때

탭열기(0) 이러면 0번 탭이 열림

탭열기(1) 이러면 1번 탭이 열림

탭열기(2) 이러면 2번 탭이 열림


이벤트버블링을 알면 이벤트리스너 줄일 수 있음

지금 탭을 만들 때 이벤트리스너를 3개나 부착했습니다. (버튼이 3개니까요)

근데 잘 생각해보면 이벤트리스너 1개만 써도 충분히 기능구현이 가능합니다.

버튼 3개의 부모인 <ul class="list"> 여기에 이벤트리스너 1개만 있어도 탭기능만들 수 있을듯요

버튼 뭘 누르든 간에 <ul class="list">에 붙은 이벤트리스너도 동작하니까요.

왜냐면 이벤트버블링이 항상 일어나기 때문입니다.

$('.list').click(function(){
  지금 누른게 버튼 0이면 탭열기(0) 실행
  지금 누른게 버튼 1이면 탭열기(1) 실행
  지금 누른게 버튼 2이면 탭열기(2) 실행
})

그래서 이렇게 탭기능 만들어도 잘 동작한다는 소리입니다.

(jQuery 셀렉터엔 .click() 이라고 써도 간단하게 click 이벤트리스너 부착가능)


Q. 왜 굳이 이벤트리스너 줄여서 코드 짜냐고요?

  • 버튼이 몇십개 있다면 이렇게 짜는게 덜 복잡하고

  • 이벤트리스너를 줄이면 램용량을 절약할 수 있습니다. 성능개선의 일환입니다.

그래서 위처럼 코드짜서 탭기능 완성해보도록 합시다.


  • 완성된 탭기능

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

function 탭열기(){
  생략
}

이러면 탭기능 잘됩니다

근데 이러나 저러나 코드 양은 똑같군요

dataset 문법을 알면 위 코드를 조금 더 짧게 바꿀 수도 있습니다.


dataset 문법 (잡기술)

<div data-데이터이름="값"></div> 

html 안에 유저 몰래 정보를 숨겨놓을 수 있습니다.

데이터이름 아무렇게나 작명하고 값도 넣으면 됩니다.

일반 유저들은 모름


document.querySelector().dataset.데이터이름;

이러면 html 요소에 숨겨놨던 데이터가 이 자리에 남습니다.

출력해보면 진짜로 아까 숨겨놓은 값이 남습니다.

이런 잡기술을 알고있으면 위에서 만들었던 코드를 조금 더 짧게 축약가능합니다.


<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> 

▲ 우선 탭의 버튼들에 이렇게 데이터를 숨겨봅시다. 따라하셈

그리고 아까 코드를 다시 살펴보면 if문이 3개였습니다.

버튼0 누르면 탭열기(0) 실행해주세요~

버튼1 누르면 탭열기(1) 실행해주세요~

버튼2 누르면 탭열기(2) 실행해주세요~

$('.list').click(function(){
  탭열기(지금누른버튼에 숨어있던 data-id)
});

▲ 근데 이렇게 코드짜면 굳이 if문이 필요없이 한 줄로 해결아닙니까

맞습니다.

지금누른버튼에 숨어있던 data-id를 알려주는 코드같은게 있습니까

있습니다. 방금 배운듯

$('.list').click(function(e){
  탭열기(e.target.dataset.id)
});

▲ 지금누른 버튼을 찾고 싶으면 e.target이고

거기 숨어있는 data-id 꺼내고 싶으면 .dataset.id 붙이면 됩니다.

그래서 위처럼 코드짜도 탭기능 완성인 것입니다.

이전 코드가 좋으면 그거 쓰면 되고 취향것 쓰시길 바랍니다.

dataset 문법이 인터넷익스플로러 11+ 에서 동작하는데 그게 마음에 안들면

옛 브라우저까지 호환 잘되는 jQuery 함수 이용하는 방법도 있습니다.

$(셀렉터).data('데이터이름', '값') 이렇게 저장하고

$(셀렉터).data('데이터이름') 이렇게 출력합니다.


아마도, dataset을 사용했을 때, 가장 좋은 점은 e.target을 사용할 수 있다는 점이다.

e.target.dataset.id

그럼 해당 id 값이 0이면, 0을 출력해준다.

그런데, 그냥 id=0이라면, 0을 출력할 수는 없다.

이 점을 유의하고, 응용해보도록 하자!!


오늘의 교훈

  1. 함수로 축약할 때 변수같은게 있으면 파라미터로 바꾸는게 좋음

  2. 이벤트리스너 줄이면 이점이 있음

  3. dataset 잡기술 알면 이벤트리스너 적게 사용할 때 내가 뭐 눌렀는지 쉽게 파악할 수도 있음

profile
좋은 길로만 가는 "조은길"입니다😁

0개의 댓글