이벤트 발생 요소에 접근하는 법

자바스크립트에서 document.addEventListener(event,handler) 로 요소에 이벤트를 걸거나 HTML에서 onEvent 을 사용해 이벤트를 적용 할 수 있다.
만약 버튼에 클릭이 발생할 때 마다 특정 로직을 실행하고 싶다면 두가지 방법이 사용 가능하겠다.

<button class="btn" type="button">버튼</button>

const btn = document.querySelector('.btn');

btn.addEventListener('click', (event) => {
   // click발생시 실행할 로직
  }
)

document.addEventListener(event,handler) 로 로직을 실행시키는 방식

<button class="btn" type="button" onClick="onClick(event)">나는 버튼이야</button>

function onClick(event) { 
  // click발생시 실행할 로직     
}

onEvent 를 HTML에 직접 사용해 이벤트를 적용하는 방식
이렇게 이벤트가 발생하고 난 뒤에는 발생한 요소에 접근 할 수 있는 방법은 없는걸까?

event.target

<div onclick="alert(event.target);">
  <span>HELLO</span>
</div>

<div> 의 onClick 은 event.target 을 띄운다.
자식 엘리먼트인 <span> 을 클릭하게되면, alert 에 표출되는 내용은 [object HTMLSpanElement] 이다. 즉 <span> 을 클릭하면, <div> 에 이벤트를 걸어도 event.target 은 <span> 이다.
<div> 만 정확하게 클릭하면 출력 내용은 [object HTMLDivElement] 이다.
event.target 은 내가 실제로 클릭한 요소를 나타내게 된다.

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/API/Event/target

event.currentTarget

<div onclick="alert(event.currentTarget);">
  <span>HELLO</span>
</div>

event.currentTarget 은 자식 요소를 클릭하는 것과 관계 없이, 이벤트가 걸린 요소(this)를 나타낸다.
event.target 과 달리 아무리 이번엔 아무리 <span> 을 클릭해도 출력 결과는 [object HTMLDivElement] 이다.

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

정리

currentTarget : 이벤트 생성 위치
target : 이벤트 발생 위치

라고 할 수 있다.