탐구

1. 이벤트 버블링

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

• event.target vs this
  • event.target : 이벤트가 발생한 가장 안쪽 요소
    • 실제 이벤트가 시작된 ‘타겟’요소
    • 버블링이 진행되어도 변하지 않는다.
  • event.currentTarget(this) : 현재 요소로, 현재 실행 중인 핸들러가 할당된 요소
  • event.eventPhase : 현재 이벤트 흐름 단계
    • 캡처링 = 1, 타겟 = 2, 버블링 = 3
• 거의 모든 이벤트는 버블링 된다.
  • focus와 같이 버블링되지 않는 이벤트도 있다.

버블링 중단하기

1. event.stopPropagation() : 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령

   버블링은 꼭 멈춰야 하는 명백한 상황이 아니라면 막지 마세요. 아키텍처를 "잘 고려해 진짜 막아야 하는 상황에서만 막으세요. stopPropagation을 사용한 영역은 ‘죽은 영역’이 되어 시스템 코드가 정상 동작하지 않을 수 있습니다.

2. event.stopImmediatePropagation() : 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.

2. 이벤트 캡처링

이벤트 캡처링은 이벤트 버블링과 반대로, 최상단의 조상 요소에서 타겟 요소까지 이벤트가 전파되는 단계이다.

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

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

addEventListener의 세 번째 인자를 true로 설정하면 캡처링이 활성화된다. (default는 false)

3. 이벤트 위임

: 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당하여 여러 요소를 다루는 것

• 공통 조상에 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다.