자바스크립트 Event Target 프로퍼티와 CurrentTarget 프로퍼티의 차이점은?

클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다

 <div @click="checkTarget">
      <span>test</span>
    </div>

 checkTarget(event) {
  var ele = event.currentTarget;
  console.log(ele);

 

• event.target  //  클릭된 span 태그를 반환
• event.currentTarget  //  이벤트가 바인딩된 div 요소를 반환

 

event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다.

즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다.

하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다.