📌이벤트 흐름(Event Flow)

어떤 요소에서 이벤트가 발생했을 때, 그 이벤트를 전파여 감지하는 흐름을 말한다.

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 다음 3가지 단계가 있다.

캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

이벤트 버블링

버블링은 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어졌다.

이벤트 캡쳐링

캡처링은 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 한마디로 버블링 반대라고 볼 수 있다.

📌이벤트 위임(Event Delegation)

• 다수의 자식요소에 각각 이벤트 핸들러를 바인딩 하는 대신, 하나의 조상 요소에 이벤트 핸들러를 바인딩 하여 여러 요소를 한꺼번에 다루는 방법

아래에서 .movie-poster나, .movie-info등 하위 요소를 클릭했을 때
상위 요소인 .movie-card에만 이벤트 리스너를 등록만 하면 구현된다.

<div class="movie-card">
  <img class="movie-poster">
  <div class="movie-info">
  	<div class="movie-title"></div>
    <div class="movie-overview"></div>
    <div class="movie-rating"></div>
  </div>
  </div>
</div>

const movieCard = document.querySeltor(.movie-card);
movieCard.addEventListener("click",showInfo(e));

이벤트 위임의 장점

• 메모리 사용량 감소
  JavaScript에서 함수는 객체입니다. 함수가 많을수록 메모리 사용량이 증가하고 함수가 적을수록 메모리 사용량이 감소합니다.

정리

• 이벤트 흐름에는 캡쳐링, 타깃, 버블링 단계가 존재
• 이벤트 위임은 이벤트 버블링을 활용하여 상위 요소에만 이벤트 리스너를 등록하는 기법
• 이벤트 위임을 적용하면 메모리 사용량이 감소하며 코드를 더 간결하게 구현가능

---

참고자료
Event Flow
🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)