[JavaScript] 이벤트 버블링, 캡쳐링, 위임에 대해 설명해주세요. (면접질문)

답변

이벤트 전파(Event Propagation)는 브라우저에서 이벤트가 발생했을 때, 이벤트가 DOM 트리를 따라 이동하는 방식을 의미합니다.
크게 캡쳐링(Capturing), 버블링(Bubbling) 두 단계가 있으며, 이벤트 위임(Event Delegation)은 이 특성을 활용하는 기법입니다.

---

키워드 설명

• 캡쳐링(Caturing Phase)
  • 이벤트가 최상위 document 에서 시작해 목표 요소까지 내려오는 단계입니다.
  • 기본적으로 JS에서 이벤트 리스너를 등록할 때 addEventListener 의 세 번째 인자를 true 로 설정하면 캡쳐링 단계에서 이벤트를 잡을 수 있습니다.

  parent.addEventListener('click', () => {
  	console.log('캡쳐링 단계에서 부모 클릭!');
  }, true);
  

• 버블링(Bubbling Phase)
  • 이벤트가 목표 요소에서 발생한 후, 부모 요소로 거슬러 올라가는 단계입니다.
  • 대부분의 이벤트는 기본적으로 버블링을 지원하며, 세 번째 인자를 생략하거나 false 로 설정하면 버블링 단계에서 이벤트를 잡습니다.

  parent.addEventListener('click', () => {
  	console.log('버블링 단계에서 부모 클릭!');
  });
  

• 이벤트 위임(Event Delegation)
  • 자식 요소 각각에 이벤트를 등록하는 대신, 공통 부모 요소 하나에 이벤트를 등록하고 이벤트 버블링을 이용해 처리하는 기법입니다.
  • 장점: 메모리 절약, 동적으로 생성되는 요소에도 이벤트 적용 가능

  const list = document.querySelector('ul');
  list.addEventListner('click', (e) => {
  	if(e.target.tagName == 'LI') {
  		console.log(`${e.target.textContent} 클릭됨`);
  	}
  });
  

---

꼬리질문

1. 버블링과 캡쳐링의 순서를 그림으로 설명해보세요.
   • 부모 → 자식 순으로 내려가면 캡쳐링, 자식→ 부모 순으로 올라가면 버블링입니다.
2. 이벤트 위임 시 e.target과 this(currentTarget)의 차이를 설명해보세요.
   • e.target은 실제 클릭된 자식, this는 이벤트 리스너가 붙은 부모 요소입니다.
3. 버블링을 막고 싶다면 어떻게 해야 하나요?
   • e.stopPropagation()을 사용하면 더 이상 부모로 이벤트가 전파되지 않습니다.
4. 동적으로 생성된 요소에도 이벤트를 적용하려면?
   • 이벤트 위임을 사용하면, 부모에 이벤트를 걸어 동적으로 생성된 자식 요소도 이벤트를 처리할 수 있습니다.