이벤트 페이즈(Event Phase)

표준 DOM 이벤트 흐름은 3가지 단계가 있습니다.

캡처링 단계 : 이벤트가 하위 요소(element)로 전파되는 단계 : 아래로

타겟 단계 : 이벤트가 실제 타겟 요소에 전달되는 단계

버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 : 위로

envent.target과 event.currentTarget

• 둘다 이벤트 객체의 속성이다.
• 이 속성들은 이벤트 위임에서 중요하게 사용된다.
• event.target은 이벤트가 발생한 요소
  • event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다.
  • 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다.
• event.currentTarget은 이벤트 리스너가 연결된 요소
  • event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다.
  • onChange 같은 경우에는 괜찮은데 onClick이벤트의 경우에는 클릭된 요소가 무엇이냐에 따라서 다를 수 있으니까 이벤트를 등록한 위치인 event.currentTarget을 사용하는 것이 좋다.

이벤트 버블링

이벤트 캡처링

엘리 : ‣

모던 : ‣