이벤트 버블링

이벤트 버블링이란?

이벤트 전파 라고도 하며, 하위태그를 누르면 상위태그까지 이벤트가 전파되는 현상

마치, 겹친 종이의 가장 가운데를 누른것처럼

출처는 코딩애플

1. 이벤트 버블링은 항상 일어남

2. 이벤트 관련 기능들을 사용해서 해결할 수 있음

 

 

다양한 이벤트함수들

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target; //실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
  e.currentTarget; //지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
  e.preventDefault(); //실행하면 이벤트 기본 동작을 막아줌
  e.stopPropagation(); //실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
})

단. function() 안에 e를 빠뜨리지 말고 꼭써야!

 

여기서 중요한건 e.target인데

이벤트 버블링이 일어난다고 해도

사용자가 실제로 클릭한 그 요소는 저 문법으로 찾아낼 수 있음을 기억!

 

//검은배경 클릭하면,모달창 닫는 기능만들기
    document.querySelector('.black-bg').addEventListener('click', function(e){
   //지금 실제로 클릭한게 검은 배경일 때만 닫아라
   if(e.target === document.querySelector('.black-bg')){
    document.querySelector('.black-bg').classList.remove('show-modal')
   }
});

이렇게 하니, 검은 배경을 제외한 흰색배경이나,로그인 여백 등을 누르면 동작하지 않습니다.

이벤트 버블링을 알면, 확실하게 타켓하여 이벤트가 일어나는 코드를 짤 수 있겠숩니다~

 

 

 

 

 

 

이벤트 버블링을 알고있으면 이벤트리스너 여러개 필요없다?!

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


//이벤트 버블링을 활용해서 이벤트 리스너 1개로 해결하기
$('.list').click(function(e){
 //지금 누른게 버튼0이면 탭열기(0)
 //지금 누른게 버튼1이면 탭열기(1)
 //지금 누른게 버튼2이면 탭열기(2)
 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);
 }

});