[JavaScript] 이벤트 버블링(Event Bubbling)

이벤트 버블링(Event Bubbling)?

이벤트 버블링(Event Bubbling) 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 의미한다.

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소(상위 요소)의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

    <div class="container mt-5">
        <ul class="list">
          <li class="tab-button">Products</li>
		<!-- 생략 -->
        </ul>
      
        <div class="tab-content">
          <p>상품설명입니다. Product</p>
        </div>
		<!-- 생략 -->
      </div> 

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

function openTab(el){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(el).addClass('orange');

    $('.tab-content').removeClass('show');
    $('.tab-content').eq(el).addClass('show');
}

반복문을 통해 탭 기능을 구현한 코드이다. 각각의 탭 버튼 요소 갯수만큼 반복하여 이벤트 리스너를 등록해주고 있으며, tab-button(li)요소에 click 이벤트가 발생하면 해당 이벤트는 상위 요소로 전달되며 최상위요소에 도달할 때까지 반복된다.

이러한 구현이 크게 문제가 되지는 않지만, 상위 요소의 이벤트도 실행함으로써 원하지 않는 결과를 발생시킬 우려가 있으며 반복적인 이벤트 생성으로 메모리 사용량이 커지고 코드가 복잡해진다.

이벤트 버블링을 제어함으로써 이러한 문제를 해결할 수 있다.

이벤트 위임

여러 개의 이벤트 리스너를 등록하지 않고 상위 요소에 하나의 이벤트 리스너만 등록하는 것을 이벤트 위임이라고 한다.

$('.list').click(function(e){
  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)
  }
})

function openTab(){
  생략
}

이처럼 탭 버튼 요소의 상위 요소인 list 요소에 이벤트 리스너를 생성하고, e.target 으로 조건을 걸어 제어가 가능하다.
e.target 은 실제 click 이벤트가 발생한 DOM 엘리먼트 객체를 의미하며, 콜백함수의 파라미터(e)를 통해 현재 호출된 타겟의 정보를 가져올 수 있고, 이를 통해 비교함으로써 제어가 가능한 원리이다.