[JavaScript] event target 프로퍼티와 currentTarget 의 차이점
자바스크립트 이벤트 중 클릭한 요소를 가져올 때, event 객체의 target 또는 currentTarget 프로퍼티를 사용한다.
이 때 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야 하는지 알아보자.
event.target? event.currentTarget?
event.target
은 이벤트 버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다.
클릭된 요소를 기준으로 사용하는 경우 event.target
을 사용한다.
event.currentTarget
의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환한다.
<li>
<button onClick={onClick}>
<span>Submit</span>
</button>
</li>
const onClick = (event) => {
console.log(event.target);
console.log(event.currentTarget);
}
// <span>Submit</span>
// <button onClick={onClick}>
// <span>Submit</span>
// </button>
event.target
은 자식 요소인 span을 리턴한다.
event.currentTarget
은 이벤트가 바인딩 된 button을 리턴한다.
정리
event.target은 부모로부터 이벤트가 위임되어 발생하는 자식 위치, 내가 클릭한 자식 요소를 리턴한다.(실제 이벤트가 발생하는 요소)
currentTarget은 이벤트가 바인딩 된 부모의 위치를 리턴한다.(이벤트 리스너가 달린 요소)
복잡해지는 경우 event.target
만으로는 어떤 요소가 클릭되어 반환되어야 하는지 그 결과가 달라질 수 있다.
이런 경우 event.currentTarget
을 활용하는 것이 더욱 편리할 것이다.
Author And Source
이 문제에 관하여([JavaScript] event target 프로퍼티와 currentTarget 의 차이점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chayezo/JavaScript-event-target-프로퍼티와-currentTarget-의-차이점저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)