JS - event.currentTarget & eventTarget

event.target과 event.currentTarget 모두 자바스크립트의 이벤트 핸들러(Event Handler)객체로 이벤트를 처리하기 위한 함수입니다.

event.target

event.target은 이벤트가 발생한 가장 하위 요소를 반환합니다. 즉 이벤트 버블링을 받아 발생하는 자식의 위치. 내가 클릭한 자식요소를 반환합니다.

event.currentTarget

이벤트 버블링이 발생하는 경우, event.currentTarget은 이벤트 핸들러가 바인딩된 요소를 반환합니다. 즉, 이벤트 핸들러가 등록된 요소인 부모 요소를 포함해 반환합니다.

예시

<script>
	const targetCheck = (e) => {
  		console.log(event.target);
  		console.log(event.currentTarget);
  }
</script>
<li>
  <button>
    <span>eventTraget</span>
  </button>
</li>

버튼을 클릭하면 event.target은 eventTarget을 출력하고 event.currentTarget은 eventTarget이 속한 button태그, span태그 모두를 출력합니다.

참고사이트
https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90