이벤트 전파

DOM 요소에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것

• 요소를 클릭하면 클릭 이벤트 발생 + 이벤트 객체 생성
• 이벤트 객체가 이벤트 타겟(이벤트가 발생한 DOM 요소)을 중심으로 DOM 트리 내에서 전파됨 => 전파되는 방향에 따라 3단계로 구분

1) Capturing 단계

• 이벤트가 상위 요소에서 하위 요소 방향으로 전파

2) Target 단계

• 이벤트가 이벤트 타겟에 도달

3) Bubbling 단계

• 이벤트가 하위 요소에서 상위 요소 방향으로 전파

e.target과 e.currentTarget의 차이?

• e.target은 이벤트가 발생한 곳 (예: li 요소)
• e.currentTarget은 이벤트 핸들러가 붙어있는 곳 (예: 이벤트 위임일 경우의 ul 요소)

전파 순서

• li 요소 클릭
  • 클릭 이벤트 발생
  • 클릭 이벤트 객체 생성
  • 클릭된 li 요소가 이벤트 타겟이 됨
• 클릭 이벤트 객체 전파
  • window에서 시작해서 이벤트 타겟 방향인 아래로 전파 (Capturing 단계)
  • 이벤트 타겟에 도달 (Target 단계)
  • 이벤트 타겟에서 window 방향으로 다시 전파 (Bubbling 단계)

이벤트가 전파되는 것과 이벤트 단계를 캐치하는 것은 다름

• 이벤트가 전파되는 것은 이벤트 발생 때마다 브라우저에서 자동으로 일어나는 일이고
• 이벤트 단계를 캐치하는 것은 버블링, 캡처링 등의 특정 단계를 캐치하는 것
  • 캐치의 기본 값은 버블링 단계
  • 캡처링 단계를 캐치하고 싶다면 addEventListener의 3번째 항(useCapture)에 true를 넣어준다.

이벤트 위임(event delegation)

이렇게 이벤트 '버블링'을 통해 하위 DOM에서 발생한 이벤트를 상위 DOM에서 캐치할 수 있음

=> 이를 이용하여 유지 보수를 용이하게 하는 이벤트 위임이 가능

이벤트 위임이란?

• 여러 하위 DOM을 가진 상위 DOM 하나에만 이벤트 핸들러를 등록하여 하위 DOM에서 발생한 이벤트를 상위에서 감지하게 하는 것
• 여러 개의 하위 DOM에 똑같은 이벤트를 등록하거나, 하위 DOM이 동적으로 생성될 경우 매번 같은 이벤트를 등록해줄 필요가 없음

유의

• 이벤트 위임을 사용할 경우 이벤트 타겟과 이벤트 커런트 타겟이 달라짐 (위 내용과 동일)
  • 이벤트 타겟은 이벤트가 실제 일어난 요소 (예: 하위 li 요소)
  • 이벤트 커런트 타겟은 이벤트 핸들러가 붙어있는 요소 (예: 상위 ul 요소)