이벤트 페이즈(Event Phase)

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

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

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

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

envent.target과 event.currentTarget

• event.target은 처음 이벤트가 발생한 요소이므로 자식 요소입니다.
• event.currentTarget은 부모 요소입니다.

• event.currentTarget은 가장 부모요소인 div이다.
• event.target은 클릭된 요소이다.

function clickHandler(event) {
  alert(
    `event.target = ${event.target.tagName}, event.currentTarget = ${event.currentTarget.tagName}, this = ${this.tagName}`
  );
}

이벤트 버블링

이벤트 캡처링

엘리 : ‣

모던 : ‣